Android UI-實現底部切換標籤之方式三 ──Activity（底部採用FragmentTabHost）添加5個子Fragment

原創 JK2514091675 2020-02-23 15:37

初步使用FragmentTabHost



步驟一:書寫好佈局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.jhy.myapplication.MainActivity">

    <FrameLayout
        android:id="@+id/fl_content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

    </FrameLayout>

    <RelativeLayout android:layout_width="match_parent"
                    android:layout_height="wrap_content">

        <android.support.v4.app.FragmentTabHost
            android:id="@+id/tabhost"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

        </android.support.v4.app.FragmentTabHost>

        <ImageView
            android:id="@+id/iv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:src="@mipmap/ic_launcher"/>
    </RelativeLayout>


</LinearLayout>


步驟二:將內容View與FragmentTabHost進行綁定,在MainActivity文件準備好要傳遞到另一個界面的數據,此處會自動進行平分左右的內容 


	//將內容View與FragTabHost進行綁定
        tabhost.setup(this, getSupportFragmentManager(), R.id.fl_content);

        TabHost.TabSpec tabSpec1 = tabhost.newTabSpec("tag1");
        //定義在底部標籤顯示的文字
        tabSpec1.setIndicator("label1");
        Bundle args1 = new Bundle();
        //要傳遞到過去的數據
        args1.putString("args", "我是lable1頁面");
        tabhost.addTab(tabSpec1, DefalutFragment.class, args1);


        TabHost.TabSpec tabSpec2 = tabhost.newTabSpec("tag2");
        tabSpec2.setIndicator("label2");
        Bundle args2 = new Bundle();
        args2.putString("args", "我是lable2頁面");
        tabhost.addTab(tabSpec2, DefalutFragment.class, args2);


步驟三:定義另外一個Fragment接收MainActivity傳遞過來的數據並顯示

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Bundle arguments = getArguments();
        args = arguments.getString("args");

    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        TextView tv=new TextView(getContext());
        tv.setGravity(Gravity.CENTER);
        tv.setText(this.getClass().getSimpleName()+""+args);
        return tv;
    }

好了,經過以上步驟就可以實現以上效果了


不過在實際應用當中,底部的FragmentTabHost不只是兩個簡單的標籤,更多的是以圖標加文字的形式進行展示

所以要在剛纔的基礎上進行進一步的美化

美化之後的效果是這樣滴



要實現上述美化的功能,將上述步驟二的代碼替換如下:

//        將內容View與FragTabHost進行綁定
        tabhost.setup(this,getSupportFragmentManager(),R.id.fl_content);

        TabHost.TabSpec tabSpec1=tabhost.newTabSpec("tag1");
        indicatorView = View.inflate(this, R.layout.inflate, null);
        //找孩子
        tabTitle = (TextView)indicatorView.findViewById(R.id.tab_title);
        tabMes = (TextView)indicatorView.findViewById(R.id.tab_mes);
        tabTitle.setText("首頁");
        //設置左上右下
        tabTitle.setCompoundDrawablesWithIntrinsicBounds(0,R.mipmap.ic_launcher,0,0);
        tabSpec1.setIndicator(indicatorView);
        Bundle args1=new Bundle();
        args1.putString("args","我是lable1頁面");
        tabhost.addTab(tabSpec1,DefalutFragment.class,args1);




        TabHost.TabSpec tabSpec2=tabhost.newTabSpec("tag2");
        indicatorView2 = View.inflate(this, R.layout.inflate, null);
        //找孩子
        tabTitle2 = (TextView)indicatorView2.findViewById(R.id.tab_title);
        tabMes2 = (TextView)indicatorView2.findViewById(R.id.tab_mes);
        tabTitle2.setText("新聞");
        //設置左上右下
        tabTitle2.setCompoundDrawablesWithIntrinsicBounds(0,R.mipmap.ic_launcher,0,0);
        tabSpec2.setIndicator(indicatorView2);
        Bundle args2=new Bundle();
        args2.putString("args","我是lable2頁面");
        tabhost.addTab(tabSpec2,DefalutFragment.class,args2);

添加一個佈局文件: 

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

    <TextView
        android:id="@+id/tab_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"

        android:drawableTop="@mipmap/ic_launcher"
        android:gravity="center"
        android:text="資訊"
        android:textSize="12sp"/>

    <TextView
        android:id="@+id/tab_mes"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_alignRight="@id/tab_title"
        android:layout_alignTop="@id/tab_title"
        android:textColor="#f00"
        android:layout_marginLeft="1dip"/>

</RelativeLayout>


這樣就能實現上述的美化功能了!!!


如果底部有很多個按鈕,一一複製上述代碼太麻煩所以提供3種方式添加

枚舉形式添加底部數據

先來看看效果圖吧



步驟一:定義枚舉類型數據


 enum  MAINTAB{
        NEW("首頁",R.mipmap.ic_launcher,DefalutFragment.class),
        TWEET("新聞",R.mipmap.ic_launcher,DefalutFragment.class),
        QUICKOPTION("",R.mipmap.ic_launcher,DefalutFragment.class),
        EXPLORE("發現",R.mipmap.ic_launcher,DefalutFragment.class),
        ME("我的",R.mipmap.ic_launcher,DefalutFragment.class);
        public String title;
        public int topResId;
        public Class clz;

        MAINTAB(String title, int topResId, Class clz) {
            this.title = title;
            this.topResId = topResId;
            this.clz = clz;
        }
    }


步驟二:for循環添加數據完整代碼如下:

/**
 * FragmentTabHos繼承-->TabHost-->FrameLayout
 */
public class MainActivity extends AppCompatActivity {

    @Bind(R.id.fl_content)
    FrameLayout flContent;
    @Bind(R.id.tabhost)
    FragmentTabHost tabhost;
    @Bind(R.id.iv)
    ImageView iv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);

        initTabHost();
    }

        private void initTabHost() {
            //將內容View與FragTabHost進行綁定
            //參數一:Context  參數二:FragmentManager   參數三:FragTabHost對應的內容容器id
            tabhost.setup(this, getSupportFragmentManager(), R.id.fl_content);
            //枚舉:某一種東西,只有幾種可能性

         /*---------------------循環形式添加Indicatorview(數據集採用枚舉)---------------------------*/
            //去掉FrgmentTabHost中的分割線
            if (Build.VERSION.SDK_INT > 10) {
                tabhost.getTabWidget().setShowDividers(0);
            }
            for (int i = 0; i < MAINTAB.values().length; i++) {
                MAINTAB maintab = MAINTAB.values()[i];
                String title = maintab.title;
                int topResId = maintab.topResId;
                Class clz = maintab.clz;
                //添加tab標籤頁
                TabHost.TabSpec tabSpec = tabhost.newTabSpec(title);
                View indicatorView = View.inflate(this, R.layout.inflate, null);
                //找孩子
                TextView tabaTitle = (TextView) indicatorView.findViewById(R.id.tab_title);
                //賦值
                tabaTitle.setText(title);
                //位置爲左上右下
                tabaTitle.setCompoundDrawablesWithIntrinsicBounds(0, topResId, 0, 0);
                tabSpec.setIndicator(indicatorView);

                Bundle args1 = new Bundle();
                args1.putString("args", "我是參數" + i);
                tabhost.addTab(tabSpec, clz, args1);
                if (i == 2) {
                    indicatorView.setVisibility(View.INVISIBLE);
                }
            }
        }

    @OnClick(R.id.iv)
    public void onClick() {
        Toast.makeText(this, "我是中間按鈕", Toast.LENGTH_SHORT).show();
    }

    enum MAINTAB {
        NEW("首頁", R.mipmap.ic_launcher, DefalutFragment.class),
        TWEET("新聞", R.mipmap.ic_launcher, DefalutFragment.class),
        QUICKOPTION("", R.mipmap.ic_launcher, DefalutFragment.class),
        EXPLORE("發現", R.mipmap.ic_launcher, DefalutFragment.class),
        ME("我的", R.mipmap.ic_launcher, DefalutFragment.class);
        public String title;
        public int topResId;
        public Class clz;

        MAINTAB(String title, int topResId, Class clz) {
            this.title = title;
            this.topResId = topResId;
            this.clz = clz;
        }
    }
}

完成!!!

Demo下載源碼地址:http://download.csdn.net/detail/k2514091675/9803221





發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Android UI-實現底部切換標籤之方式二 ──Activity（底部採用radioGroup+rutton）添加5個子fragment

此篇博客與http://blog.csdn.net/k2514091675/article/details/69053676類似,唯一區別是將主頁面Fragment換成Activity 效果圖如下 首先是佈局文件 activity_ma

JK2514091675 2020-06-15 13:48:47

Android UI-實現底部切換標籤之方式一 ──fragment（底部採用radioGroup+radiobutton）添加5個子fragment

JK2514091675 2020-02-23 15:37:23