2014/04/22

android 圖(背景圖) 及 文字 對齊的問題

實作過Button物件的人應該知道，Button除了設定背景圖外，還可以加上顯示的文字。Button的layoutheight & layoutwidth 若設為wrap_content Button就會依文字寬高或背景圖來呈現最剛好的尺寸。

在開發過程中，也許我們會因SDK版本升級，而造成Old SdkVersion的Button物件無法正常呈現(尺寸不同及跑位)，其一的解決方法，就是拿ImageButton來替代Button，ImageButton才能設定背景圖，但ImageButton卻不能設定文字，我們得調整layout來達成圖文並茂的按鈕。

看到有人的解決方法是拿一個RelativeLayout或LinearLayout, 把ImageButton、TextView放入呈現

轉載自 http://blog.csdn.net/jju_zsb/article/details/8888075

<LinearLayout
    android:id="@id/btn_bjqj"
    android:layout_width="0dip"
    android:layout_height="wrap_content"
    android:layout_weight="1.0"
    android:background="@drawable/bg_table_item"
    android:clickable="true"
    android:orientation="vertical" >

    <ImageButton
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@null"
        android:clickable="false"
        android:contentDescription="@string/nav_bottom_tuijian"
        android:focusable="false"
        android:src="@drawable/ic_bjtj" />
    <TextView
        style="@style/LauncherTitleTextAppearance"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:clickable="false"
        android:focusable="false"
        android:gravity="center_horizontal"
        android:paddingBottom="6dip"
        android:text="@string/btn_bjqj"
        android:textColor="@color/tab_bottom_text_color"
        android:textSize="12.0sp" />

</LinearLayout>

轉載自：http://stackoverflow.com/questions/6115567/how-can-i-align-my-imageview-with-my-textview-in-a-linearlayout

<RelativeLayout
    android:layout_height="wrap_content"
    android:layout_width="fill_parent"
    android:id="@+id/headerLinearLay"
    android:orientation="horizontal">
    <ImageView
        android:id="@+id/avatarImageView"
        android:src="@drawable/icon"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"></ImageView>
    <TextView
        android:id="@+id/usernameTextView"
        android:text="TextView"
        android:paddingLeft="4dp"
        android:layout_toRightOf="@id/avatarImageView"
        android:layout_centerVertical="true"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"></TextView>
</RelativeLayout>

以上兩種方法似乎都還不錯，不過因為我已經在RelativeLayout包了一堆Button及TextView，也排版好了，所以我就用Textview設定好文字及位，再依ImageButton來對齊TextView。

< RelativeLayout
    android:id= "@+id/titleBar"
    android:layout_width= "match_parent"
    android:layout_height= "wrap_content"
    android:background= "@drawable/topbarbg"
    android:padding= "2dp" >

    <TextView
        android:id= "@+id/tv_cancel"
        android:layout_width= "wrap_content"
        android:layout_height= "wrap_content"
        android:layout_alignParentLeft ="true"
        android:layout_centerVertical ="true"
        android:gravity= "center"
        android:paddingLeft= "5dp"
        android:paddingRight= "5dp"
        android:text= "@string/cancel"
        android:textColor= "@color/white" />

    <ImageButton
        android:id= "@+id/btn_cancel"
        android:layout_width= "wrap_content"
        android:layout_height= "wrap_content"
        android:layout_alignLeft= "@+id/tv_cancel"
        android:layout_alignRight= "@+id/tv_cancel"
        android:layout_centerVertical ="true"
        android:background= "@drawable/topbar5_button"
        android:contentDescription= "@null" />

    <TextView
        android:id= "@+id/tv_finish"
        android:layout_width= "wrap_content"
        android:layout_height= "wrap_content"
        android:layout_alignParentRight ="true"
        android:layout_centerVertical ="true"
        android:gravity= "center"
        android:paddingLeft= "5dp"
        android:paddingRight= "5dp"
        android:text= "@string/finish"
        android:textColor= "@color/white" />

    <ImageButton
        android:id= "@+id/btn_finish"
        android:layout_width= "wrap_content"
        android:layout_height= "wrap_content"
        android:layout_alignLeft= "@+id/tv_finish"
        android:layout_alignRight= "@+id/tv_finish"
        android:layout_centerVertical ="true"
        android:background= "@drawable/topbar5_button"
        android:contentDescription= "@null" >

    </ImageButton >

    <TextView
        android:id= "@+id/title"
        android:layout_width= "fill_parent"
        android:layout_height= "wrap_content"
        android:layout_centerVertical ="true"
        android:layout_toLeftOf= "@id/btn_finish"
        android:layout_toRightOf= "@id/btn_cancel"
        android:gravity= "center"
        android:text= "@string/choicemember"
        android:textColor= "@color/titletextcolor"
        android:textSize= "26sp" />
</RelativeLayout >

好像也不會複雜而且又有一樣的效果。 不過..... 解決了一個問題，又來了一個問題。

我們再回來看Button這個物件，其實Button是個好用的物件，不過卻有那麼一些美中不足， 這次我想在按鈕上加上一個icon及文字，而文字就要剛好顯示在icon的旁邊。

<Button
    android:id= "@+id/btn_sipcall"
    android:layout_width= "wrap_content"
    android:layout_height= "wrap_content"
    android:layout_alignParentLeft ="true"
    android:layout_centerVertical ="true"
    android:layout_marginRight= "5dp"
    android:layout_toLeftOf= "@+id/btn_sipclose"
    android:background ="@drawable/bottombar_sip_call_button"
    android:drawableLeft= "@drawable/call_sip_icon"
    android:text= "@string/profile_sip_voice"
    android:textColor= "@color/light_purple2" />

我發現有一個drawableLeft的屬性，可以把icon放在最左側，而文字就會被推擠往右一下。 android:drawableLeft= "@drawable/callsipicon" 還在想說怎麼這麼簡單就解決了，才知道icon不能對齊中間，而文字又只能顯示在中間，看來又得用調整Layout排版的方法來處理。

後來爬到一個好方法，原來還可以解一段程式碼，將按鈕和icon帶進去個別處理，這方法可以說是完美呀！

轉載自：http://www.it165.net/pro/html/201303/5202.html

public static void set_button_Drawable_center(final Context context,final Button button,final int imageID,final int spacing)
{
    handler=new Handler();
    runnable=new Runnable() {

            @Override
            public void run() {
                    // TODO Auto-generated method stub
                    if(button.getMeasuredWidth() == 0)
                    {
                            handler.postDelayed(runnable, 0);
                    }else{
                            Drawable drawable=context.getResources().getDrawable(imageID);
                            int width=button.getMeasuredWidth();            
                            int height=button.getMeasuredHeight();

                            int txt_width=(int)(button.getTextSize()*button.getText().length());
                            int txt_height=(int)(button.getLineCount()*button.getLineHeight());

                            int img_width=drawable.getIntrinsicWidth();
                            int img_height=drawable.getIntrinsicHeight();
                            int content_height=txt_height+img_height+spacing;
                            int content_width=txt_width+img_width+spacing;
                            int padding_w=width/2-content_width/2;
                            int padding_h=height/2-content_height/2;

                            button.setCompoundDrawablesWithIntrinsicBounds(drawable, null, null, null);
                            button.setPadding(padding_w,0,0,0);
                            button.setCompoundDrawablePadding(-padding_w);
                    }
            }
    };
    handler.postDelayed(runnable, 0);
}

這樣就解決囉！ 忍不住想給原作按個讚！

張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)