tab的简单写法

来源：互联网发布：linux开发入门编辑：程序博客网时间：2024/06/09 19:13

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <FrameLayout        android:id="@+id/fragment_layout"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1">    </FrameLayout>    <include layout="@layout/view_toolsbar"></include></LinearLayout>

tab栏 view_toolsbar.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="58dp">    <TextView        android:layout_width="match_parent"        android:layout_height="1px"        android:background="#949494" />    <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:gravity="center_vertical"        android:orientation="horizontal">        <Button            android:id="@+id/id_tools1"            style="@style/toolsItem"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:background="@null"            android:drawableTop="@drawable/tools_icon"            android:text="首页" />        <Button            android:id="@+id/id_tools2"            style="@style/toolsItem"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:background="@null"            android:drawableTop="@drawable/tools_icon"            android:text="应用" />        <Button            android:id="@+id/id_tools3"            style="@style/toolsItem"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:background="@null"            android:drawableTop="@drawable/tools_icon"            android:text="游戏" />        <Button            android:id="@+id/id_tools4"            style="@style/toolsItem"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:background="@null"            android:drawableTop="@drawable/tools_icon"            android:text="发现" />        <Button            android:id="@+id/id_tools5"            style="@style/toolsItem"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:background="@null"            android:drawableTop="@drawable/tools_icon"            android:text="管理" />    </LinearLayout></FrameLayout>

这里用到了图片资源 tools_icon.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_selected="true" android:drawable="@drawable/tools_icon_s" />    <!--<item android:state_pressed="true" android:drawable="@drawable/tools_icon_p" />-->    <item android:drawable="@drawable/tools_icon_n" /></selector>

每个按钮也用到了样式

    <style name="toolsItem">        <item name="android:drawablePadding">2dp</item>        <item name="android:paddingTop">6dp</item>        <item name="android:textSize">13sp</item>    </style>

以上XML基本完成

接着就是写MainActivity.java

public class MainActivity extends AppCompatActivity implements View.OnClickListener{    private Button tab1, tab2, tab3, tab4, tab5;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        initView();    }    @Override    protected void onStart() {        super.onStart();        setTools(tab1);        tab1.setSelected(true);    }    private void initView() {        tab1 = (Button) findViewById(R.id.id_tools1);        tab2 = (Button) findViewById(R.id.id_tools2);        tab3 = (Button) findViewById(R.id.id_tools3);        tab4 = (Button) findViewById(R.id.id_tools4);        tab5 = (Button) findViewById(R.id.id_tools5);        tab1.setOnClickListener(this);        tab2.setOnClickListener(this);        tab3.setOnClickListener(this);        tab4.setOnClickListener(this);        tab5.setOnClickListener(this);    }    @Override    public void onClick(View v) {        switch (v.getId()) {            case R.id.id_tools1:                setTools(tab1);                break;            case R.id.id_tools2:                setTools(tab2);                break;            case R.id.id_tools3:                setTools(tab3);                break;            case R.id.id_tools4:                setTools(tab4);                break;            case R.id.id_tools5:                setTools(tab5);                break;        }    }    private void setTools(Button v) {        tab1.setTextColor(Color.BLACK);        tab1.setSelected(false);        tab2.setTextColor(Color.BLACK);        tab2.setSelected(false);        tab3.setTextColor(Color.BLACK);        tab3.setSelected(false);        tab4.setTextColor(Color.BLACK);        tab4.setSelected(false);        tab5.setTextColor(Color.BLACK);        tab5.setSelected(false);        v.setTextColor(Color.RED);        v.setSelected(true);    }}

基本完成了一个简单的tab切换

0 0