Android底部選項卡簡單佈局
阿新 • • 發佈:2019-01-25
之前做專案的時候經常會遇到選項卡配合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包的的留郵箱