1. 程式人生 > >Android底部選項卡簡單佈局

Android底部選項卡簡單佈局

之前做專案的時候經常會遇到選項卡配合fragment來切換介面,今天給大家分享個簡單的選項卡的佈局 上程式碼:
首先是xml佈局 也是很簡單 不需要寫註釋,
tabshow1.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
android:layout_width="match_parent" android:layout_height="@dimen/lin_height" android:orientation="horizontal" android:layout_alignParentBottom="true">
<Button android:id="@+id/bt1" style="@style/buttonStyle" android:drawableTop
="@drawable/button_messege_selector" android:text="@string/button_messege"/>
<Button android:id="@+id/bt2" style="@style/buttonStyle" android:drawableTop="@drawable/button_person_selector" android:text="@string/button_person"/> <Button
android:id="@+id/bt3" style="@style/buttonStyle" android:drawableTop="@drawable/button_setting_selector" android:text="@string/button_setting"/>
</LinearLayout> </RelativeLayout>

接下來是xml涉及到的幾個狀態的檔案
values 目錄下styles裡面加上buttonStyle

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="buttonStyle">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_weight">1</item>
        <item name="android:layout_height">match_parent</item>
        <item name="android:paddingTop">@dimen/button_paddingtop</item>
        <item name="android:textColor">@drawable/tab_textcolor</item>
        <item name="android:textSize">@dimen/button_textsize</item>
        <item name="android:background">@color/black</item>
        <item name="android:scaleType">matrix</item>
    </style>
</resources>

drawable下新建tab_textcolor.xml

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item  android:state_selected="true" android:color="@color/color_bottom_text_press"/>
    <item android:state_selected="false" android:color="@color/color_bottom_text_normal"/>

</selector>

drawable下新建button_messege_selector

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/icon_message_press" android:state_selected="true"/>
    <item android:drawable="@drawable/icon_message_normal"/>
</selector>

其他兩個同上,只是換了icon圖示而已;
String.xml

<string name="button_messege">訊息</string>
<string name="button_person">個人</string>
<string name="button_setting">設定</string>

dimens.xml

 <dimen name="button_paddingtop">5dp</dimen>
 <dimen name="button_textsize">12dp</dimen>
 <dimen name="lin_height">52dp</dimen>

最後在activity裡的程式碼

public class TabShow extends Activity implements OnClickListener{
    @ViewInject(R.id.bt1)
    private Button bt1;
    @ViewInject(R.id.bt2)
    private Button bt2;
    @ViewInject(R.id.bt3)
    private Button bt3;
    private Button[] button;
    private int index = 0;
    private int currentTabIndex = 0;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tabshow1);
        ViewUtils.inject(this);
        initListener();
        initView();
    }
    private void initView() {
        button = new Button[]{bt1,bt2,bt3};
        button[index].setSelected(true);
    }
    private void initListener() {
        bt1.setOnClickListener(this);
        bt2.setOnClickListener(this);
        bt3.setOnClickListener(this);
    }
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.bt1:
            index = 0;
            break;
        case R.id.bt2:
            index = 1;
            break;
        case R.id.bt3:
            index = 2;
            break;
        default:
            break;
        }
        if (currentTabIndex!=index) {
            button[currentTabIndex].setSelected(false);
            button[index].setSelected(true);
            currentTabIndex = index;
        }
    }
}

上一張效果圖吧

這裡寫圖片描述

有需要xutils jar包的的留郵箱