Android UI-实现底部切换标签之方式三 ──Activity（底部采用FragmentTabHost）添加5个子Fragment

来源：互联网发布：评定nba历史地位的算法编辑：程序博客网时间：2024/05/22 01:41

初步使用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

0 0