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包的的留邮箱