How to align BOX in the middle horizontally and vertically ?

Technical | Application Development | patash | 1 month | 3 Replies | 1,994 Views

*

patash

  • ****
  • 491
  • 5165 Points
  • Tizen is better than iOS.
How to align BOX in the middle horizontally and vertically ?
« On:August 19, 2015, 09:20:36 AM »
Hi All,
I am developing a UI to show time with two labels side by side. like 8:00 PM
And the Box must be dynamically positioned at the middle of the screen. But cannot get the width of the BOX to calculate: screenwidth + boxwidth / 2.

How do i achieve it ?
2. And also is it possible to apply a background image to the box ?
3. Also how do i place my control at the same position for different screen sizes ? Is there a way ?

code below:

   // Add the box
   ad->box = elm_box_add(ad->conform);
   elm_box_horizontal_set(ad->box, EINA_TRUE);

   // Create a label Time
   ad->labelTime = elm_label_add(ad->box);
   // Set text to the label with a tag
   elm_object_text_set(ad->labelTime, "<font_size=110><color=#000000>0:00 </color></font_size>");
   // Add the label to the box
   elm_box_pack_end(ad->box, ad->labelTime);
    evas_object_resize(ad->box, 550, 220);
    evas_object_move(ad->box, screen_size_w/2-300, 400);
   // Change labelTime visibility
   evas_object_show(ad->labelTime);

   //Create label unit
   ad->labelUnit = elm_label_add(ad->box);
   elm_object_text_set(ad->labelUnit, "<font_size=25><color=#000000>AM</color></font_size>");
   elm_box_pack_end(ad->box, ad->labelUnit);
   evas_object_show(ad->labelUnit);

   // Repeat with other labels
   evas_object_show(ad->box);

4. How to update the time as the label does not have the name. So what is the api to get the label object from the BOX. As there are two labels within the BOX.


Regards,
Ashish P
« Last Edit: August 21, 2015, 07:38:31 AM by patash »



*

Praveen Chikkappaiah

  • **
  • 34
  • 305 Points
    • View Website
Re: How to align BOX in the middle horizontally and vertically ?
« Reply #1 On:August 24, 2015, 05:05:24 PM »
Hi Ashish,

Answer to your point #1

==================================================================================
Why dont you use naviframe ?

Please use this code as a reference:

   /* Naviframe */
   nf = elm_naviframe_add(conform);
   elm_object_content_set(conform, nf);
   evas_object_show(nf);

   // Add the box
   box = elm_box_add(nf);
   // Create a label
   label1 = elm_label_add(box);
   // Set text to the label with a tag
   elm_object_text_set(label1, "<font_size=110><color=#000000>07:26</color></font_size>");
   // Add the label to the box
   elm_box_pack_end(box, label1);
   // Change label visibility
   evas_object_show(label1);

   // Repeat with other labels

   evas_object_show(box);

   elm_naviframe_item_push(nf, _("World Clock"), NULL, NULL, box, "basic");

==================================================================================

Answer to your point #2

bg cant be added to a box. You can add it to the window in which the box exists.

==================================================================================

Answer to your point #3
which control are you referring to ?
in general if you have used the default ui controls provided by elementary then it will be automatically resized.
however if you have customised controls & have used certain hard codings by taking some resolution as a the base reference then you will have to take care of it for different screen resolutions.

==================================================================================

Answer to your point #4

As I can see in your code, you are already storing the label handles in ad->labelTime & ad->labelUnit
You can update the label at later point of time by using the api  elm_object_text_set(ad->labelUnit, "Some new label");

Cheers,
Praveen C



*

patash

  • ****
  • 491
  • 5165 Points
  • Tizen is better than iOS.
Re: How to align BOX in the middle horizontally and vertically ?
« Reply #2 On:August 24, 2015, 05:33:51 PM »
Praveen,
Thanks for the answer.
And to answer your question -
1. Why i am not using naviframe ?
A1. I thought it is optional. i might be wrong although.

2. BG cannot be applied to a BOX.
A1. i was rather looking for a picturebox to have a image applied of the size of a box. if not the box then what alternative can we have ? I also want to rotate it. But see picturebox (MS .net) missing here.

3. By "Also how do i place my control at the same position for different screen sizes ? Is there a way ?"
A3: I meant all controls on the screen. Rather i mean 'How do i design screens that will render correctly for different screen sizes ?'

A4. Well is storing handle ideally a correct way, or do we have to assign an ID to a control ?

Also i am hardcoding things to place them in my code. but to do it correctly how do i get the width of a control ?



Ashish Patil

*

Praveen Chikkappaiah

  • **
  • 34
  • 305 Points
    • View Website
Re: How to align BOX in the middle horizontally and vertically ?
« Reply #3 On:August 25, 2015, 09:47:21 AM »
Hi Ashish,
1. Naviframe is optional. It depends on your UI layout. If you want tab bars, tool bars & have a UI based on navigation between views  etc then it makes sense to have a naviframe. Else you can have a simple layout and add the box into the layout content.

2. Well I would suggest you to have your own edc file and make a custom group. You can then have a IMAGE part and a swallow content to hold the box. You can handle rotation, dynamic bg image change with this. I would suggest you go through the edc programming for this.

3. EFL automatically takes care of resizing. However if your program is doing some hard coding and forcing the resize to some particular resolution like evas_object_resize(win, 480, 800); then you need to handle such things for different screen resolutions.

4. Storing handles is the recommended way. However take care of assigning these handles to NULL when you delete them.

if (ad->labelUnit) {
    evas_object_del(ad->labelUnit);
    ad->labelUnit = NULL;
}

You can use evas_object_geometry_get to get the x, y, w & h of the evas object.


Tags:
 


Facebook Comments




anything