Fragment实现的Tab标签

最新推荐文章于 2021-05-28 15:47:18 发布

原创最新推荐文章于 2021-05-28 15:47:18 发布 · 587 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Android #界面 #布局

Android学习中的笔记专栏收录该内容

95 篇文章

订阅专栏

本文介绍了一种使用Android中的Fragment来实现Tab布局的方法。通过在MainActivity中定义不同的Fragment，并为每个Tab配置相应的点击事件，可以轻松地切换显示的内容区域。此外，还提供了具体的代码示例和布局文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

利用Fragment实现Tab主界面的方法

Fragment是在Android3.0以后引入的一个，它可以优化布局层次，与viewpager相比，它不用像Viewpager一样在所有的布局都要mainactivity中进行初始化，包括后面的事件。

案例：

先是布局文件：

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

        <!--顶部-->
        <RelativeLayout
            android:id="@+id/rl_top_tab"
            android:layout_width="match_parent"
            android:layout_height="50dp">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:text="金属材料及热处理"
                android:textStyle="bold"
                android:textSize="30sp"
                android:gravity="center"
                android:background="#7737ff00"/>

        </RelativeLayout>
        
        <!--底部-->
        <LinearLayout
            android:id="@+id/ll_bottom_tab"
            android:layout_width="match_parent"
            android:layout_height="90dp"
            android:layout_alignParentBottom="true"
            android:orientation="horizontal"
            android:baselineAligned="true">
            <LinearLayout
                android:id="@+id/mTabcailiao"
                android:layout_width="0dp"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:orientation="vertical"
                android:gravity="center"
                android:background="#770000ff">
                <ImageButton
                    android:id="@+id/mImgbut1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/tab1"/>
                <TextView
                    android:id="@+id/tv_cailiao"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="材料类型"/>
            </LinearLayout>
            <LinearLayout
                android:id="@+id/mTablixue"
                android:layout_width="0dp"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:orientation="vertical"
                android:gravity="center"
                android:background="#770000ff">
                <ImageButton
                    android:id="@+id/mImgbut2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/tab2"/>
                <TextView
                    android:id="@+id/tv_lixue"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="力学性能"/>
            </LinearLayout>
            <LinearLayout
                android:id="@+id/mTabrechuli"
                android:layout_width="0dp"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:orientation="vertical"
                android:gravity="center"
                android:background="#770000ff">
                <ImageButton
                    android:id="@+id/mImgbut3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/tab3"/>
                <TextView
                    android:id="@+id/tv_rechuli"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="热处理"/>
            </LinearLayout>
            <LinearLayout
                android:id="@+id/mTabsetting"
                android:layout_width="0dp"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:orientation="vertical"
                android:gravity="center"
                android:background="#770000ff">
                <ImageButton
                    android:id="@+id/mImgbut4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/tab_settings_normal"/>
                <TextView
                    android:id="@+id/tv_setting"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="设置"/>
            </LinearLayout>

        </LinearLayout>

        <!--内容部分-->
        <LinearLayout
            android:id="@+id/ll_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@+id/ll_bottom_tab"
            android:layout_below="@+id/rl_top_tab"
            android:orientation="vertical">
            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:layout_above="@+id/ll_bottom_tab"/>



        </LinearLayout>

    </RelativeLayout>
    
    
    
</FrameLayout>

在MainActivity.java中

package com.administrator.thermaltreatment;



import android.graphics.Color;
import android.support.v4.app.FragmentActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageButton;
import android.widget.LinearLayout;
import android.support.v4.app.FragmentManager;
import android.widget.TextView;


public class MainActivity extends FragmentActivity implements View.OnClickListener {

    private LinearLayout mTabcailiao;
    private LinearLayout mTablixue;
    private LinearLayout mTabrechuli;
    private LinearLayout mTabsetting;

    private ImageButton mImgcailiao;
    private ImageButton mImglixue;
    private ImageButton mImgrechuli;
    private ImageButton mImgsetting;

    //四个内容区域
    private android.support.v4.app.Fragment mContent01;
    private android.support.v4.app.Fragment mContent02;
    private android.support.v4.app.Fragment mContent03;
    private android.support.v4.app.Fragment mContent04;


    private TextView tv_cailiao;
    private TextView tv_lixue;
    private TextView tv_rechuli;
    private TextView tv_setting;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initview();
        initEvent();
        setselected(0);

    }

    private void initview() {
        mTabcailiao = (LinearLayout) findViewById(R.id.mTabcailiao);
        mTablixue = (LinearLayout) findViewById(R.id.mTablixue);
        mTabrechuli = (LinearLayout) findViewById(R.id.mTabrechuli);
        mTabsetting = (LinearLayout) findViewById(R.id.mTabsetting);

        mImgcailiao = (ImageButton) findViewById(R.id.mImgbut1);
        mImglixue = (ImageButton) findViewById(R.id.mImgbut2);
        mImgrechuli = (ImageButton) findViewById(R.id.mImgbut3);
        mImgsetting = (ImageButton) findViewById(R.id.mImgbut4);

        tv_cailiao = (TextView) findViewById(R.id.tv_cailiao);
        tv_lixue= (TextView) findViewById(R.id.tv_lixue);
        tv_rechuli= (TextView) findViewById(R.id.tv_rechuli);
        tv_setting= (TextView) findViewById(R.id.tv_setting);

    }

      private void initEvent(){
        mTabcailiao.setOnClickListener(this);
        mTablixue.setOnClickListener(this);
        mTabrechuli.setOnClickListener(this);
        mTabsetting.setOnClickListener(this);
      }


     public void onClick(View v) {
        //添加一个令图片变暗的方法
        resetImg();
        switch (v.getId()) {
            case R.id.mTabcailiao:
                setselected(0);
                break;
            case R.id.mTablixue:
                setselected(1);
                break;
            case R.id.mTabrechuli:
                setselected(2);
                break;
            case R.id.mTabsetting:
                setselected(3);
                break;

        }

    }


     private void setselected(int i) {
        FragmentManager fm = getSupportFragmentManager();
        android.support.v4.app.FragmentTransaction transaction = fm.beginTransaction();
        hideFragment(transaction);
        transaction.commit();


        switch (i) {
            case 0:
                if(mContent01==null){
                    mContent01=new cailiao_fragment();
                    transaction.add(R.id.ll_content,mContent01);
                }else{
                    transaction.show(mContent01);
                }
                mTabcailiao.setBackgroundColor(Color.RED);
                break;
            case 1:
                if(mContent02==null){
                    mContent02=new lixue_fragment();
                    transaction.add(R.id.ll_content,mContent02);
                }else{
                    transaction.show(mContent02);
                }
                mTablixue.setBackgroundColor(Color.RED);
                break;
            case 2:
                if(mContent03==null){
                    mContent03=new rechuli_fragment();
                    transaction.add(R.id.ll_content,mContent03);
                }else{
                    transaction.show(mContent03);
                }
                mTabrechuli.setBackgroundColor(Color.RED);
                break;
            case 3:
                if(mContent04==null){
                    mContent04=new setting_fragment();
                    transaction.add(R.id.ll_content,mContent04);
                }else{
                    transaction.show(mContent04);
                }
                mTabsetting.setBackgroundColor(Color.RED);
                break;


        }
    }

    private void hideFragment(android.support.v4.app.FragmentTransaction transaction) {
        if (mContent01 != null) {
            transaction.hide(mContent01);
        }
        if (mContent02 != null) {
            transaction.hide(mContent02);
        }
        if (mContent03 != null) {
            transaction.hide(mContent03);
        }
        if (mContent04 != null) {
            transaction.hide(mContent04);
        }


    }


    private void resetImg() {
        mTabcailiao.setBackgroundColor(Color.BLUE);
        mTablixue.setBackgroundColor(Color.BLUE);
        mTabrechuli.setBackgroundColor(Color.BLUE);
        mTabsetting.setBackgroundColor(Color.BLUE);
    }

}

我们还有四个Fragment:

cailiao_fragment.java；

lixue_fragment.java；

rechuli_fragment.java；

setting_fragment.java

以及与他们对应的XML布局

content01.xml

content02.xml

content03.xml

content04.xml

在cailiao_fragment等四个fragment中我们直接onCreatview，然后Copy四份，修改一些layout的id（红色加粗地方）。如下：

package com.administrator.thermaltreatment;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by Administrator on 2016/3/2.
 */
public class cailiao_fragment extends android.support.v4.app.Fragment {
    
    @Override
    public View onCreateView(LayoutInflater inflater,
                             ViewGroup container, Bundle savedInstanceState) {

        return inflater.inflate(R.layout.<span style="color:#ff0000;"><strong>content01</strong></span>,container,false);
    }
}

至此，一个利用Fragment写出的Tab标签就好了，效果如下（我是用的真机，图可能有点模糊）