fragment + tabhost使用

最新推荐文章于 2021-12-30 16:20:25 发布
最新推荐文章于 2021-12-30 16:20:25 发布
阅读量287 收藏
点赞数
分类专栏： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Peterpan1223/article/details/78972358
版权

总结下几种常见的搭建主页面方式，有普通导航栏，中间凸出导航栏

1.fragment + tabhost

  • activity_main
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.fengyun.collection.MainActivity">

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

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

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp"/>
    </android.support.v4.app.FragmentTabHost>

</LinearLayout>
  • MainActivity
public class MainActivity extends AppCompatActivity implements TabHost.OnTabChangeListener {

    private FragmentTabHost tabHost;

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

        tabHost = (FragmentTabHost) super.findViewById(android.R.id.tabhost);
        tabHost.setup(this, super.getSupportFragmentManager(), R.id.contentLayout);
        tabHost.getTabWidget().setDividerDrawable(null);
        tabHost.setOnTabChangedListener(this);
        initTab();
    }


    private void initTab() {
        String tabs[] = TabDb.getTabsTxt();
        for (int i = 0; i < tabs.length; i++) {
            TabHost.TabSpec tabSpec = tabHost.newTabSpec(tabs[i]).setIndicator(getTabView(i));
            tabHost.addTab(tabSpec, TabDb.getFragments()[i], null);
            tabHost.setTag(i);
        }
    }

    private View getTabView(int idx) {
        View view = LayoutInflater.from(this).inflate(R.layout.footer_tabs, null);
        ((TextView) view.findViewById(R.id.tvTab)).setText(TabDb.getTabsTxt()[idx]);
        if (idx == 0) {
            ((TextView) view.findViewById(R.id.tvTab)).setTextColor(getResources().getColor(R.color.brown));
            ((ImageView) view.findViewById(R.id.ivImg)).setImageResource(TabDb.getTabsImgLight()[idx]);
        } else {
            ((ImageView) view.findViewById(R.id.ivImg)).setImageResource(TabDb.getTabsImg()[idx]);
        }
        return view;
    }

    @Override
    public void onTabChanged(String tabId) {
        updateTab();
    }

    private void updateTab() {
        TabWidget tabw = tabHost.getTabWidget();
        for (int i = 0; i < tabw.getChildCount(); i++) {
            View view = tabw.getChildAt(i);
            ImageView iv = (ImageView) view.findViewById(R.id.ivImg);
            if (i == tabHost.getCurrentTab()) {
                ((TextView) view.findViewById(R.id.tvTab)).setTextColor(getResources().getColor(R.color.brown));
                iv.setImageResource(TabDb.getTabsImgLight()[i]);
            } else {
                ((TextView) view.findViewById(R.id.tvTab)).setTextColor(getResources().getColor(R.color.tab_normal_color));
                iv.setImageResource(TabDb.getTabsImg()[i]);
            }
        }
    }

}
  • footer_tabs
<?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="wrap_content"
                android:padding="5dp">

    <ImageView
        android:id="@+id/ivImg"
        android:layout_centerHorizontal="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <TextView
        android:id="@+id/tvTab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/ivImg"
        android:layout_centerHorizontal="true"
        android:text=""
        android:textColor="@color/tab_text_color"
        android:textSize="12sp"/>
</RelativeLayout>
  • TabDb
public class TabDb {
    public static String[] getTabsTxt(){
        String[] tabs={"首页","社区","消息","我的"};
        return tabs;
    }
    public static int[] getTabsImg(){
        int[] ids={R.drawable.home_normal,R.drawable.jianding_normal,R.drawable.xiaoxi_normal,R.drawable.wode_normal};
        return ids;
    }
    public static int[] getTabsImgLight(){
        int[] ids={R.drawable.home_active,R.drawable.jianding_active,R.drawable.xiaoxi_active,R.drawable.wode_active};
        return ids;
    }
    public static Class[] getFragments(){
        Class[] clz={HomeFragment.class,CommunityFragment.class,MessageFragment.class,MineFragment.class};
        return clz;
    }
}

2.自己画

  • 看效果图，思路参考网上资料。

  • 这里写图片描述

    1. MainActivity 
public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private RelativeLayout mRl_home;
    private RelativeLayout mRl_community;
    private RelativeLayout mRl_message;
    private RelativeLayout mRl_mine;

    private Fragment[] mFragments;
    private CustomViewPager mViewPager;


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

        initData();
        initView();
    }

    private void initData() {
        mFragments = new Fragment[4];
        mFragments[0] = new HomeFragment();
        mFragments[1] = new CommunityFragment();
        mFragments[2] = new MessageFragment();
        mFragments[3] = new MineFragment();
    }

    private void initView() {
        mViewPager = (CustomViewPager) findViewById(R.id.viewpager);
        mRl_home = (RelativeLayout) findViewById(R.id.tab_home);
        mRl_community = (RelativeLayout) findViewById(R.id.tab_community);
        mRl_message = (RelativeLayout) findViewById(R.id.tab_message);
        mRl_mine = (RelativeLayout) findViewById(R.id.tab_mine);

        mRl_home.setOnClickListener(this);
        mRl_community.setOnClickListener(this);
        mRl_message.setOnClickListener(this);
        mRl_mine.setOnClickListener(this);

        mViewPager.setAdapter(new MyAdapter(getSupportFragmentManager()));
        mViewPager.setOffscreenPageLimit(4);

        tabSelected(mRl_home);
    }

    private class MyAdapter extends FragmentPagerAdapter {
        MyAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return mFragments[position];
        }

        @Override
        public int getCount() {
            return mFragments.length;
        }
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.tab_home:
                mViewPager.setCurrentItem(0);
                tabSelected(mRl_home);
                break;
            case R.id.tab_community:
                mViewPager.setCurrentItem(1);
                tabSelected(mRl_community);
                break;
            case R.id.tab_message:
                mViewPager.setCurrentItem(2);
                tabSelected(mRl_message);
                break;
            case R.id.tab_mine:
                mViewPager.setCurrentItem(3);
                tabSelected(mRl_mine);
                ((MineFragment)mFragments[3]).tabSelect();
                break;
            default:
                break;
        }
    }

    private void tabSelected(RelativeLayout relativeLayout) {
        mRl_home.setSelected(false);
        mRl_community.setSelected(false);
        mRl_message.setSelected(false);
        mRl_mine.setSelected(false);
        relativeLayout.setSelected(true);
    }
}
  • 2.activity_main
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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:clipChildren="false"
    android:orientation="vertical"
    tools:context="com.fengyun.collection.ui.MainActivity">

    <com.collection.view.CustomViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/ll_bottom"/>

    <LinearLayout
        android:id="@+id/ll_bottom"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal">

        <RelativeLayout
            android:id="@+id/tab_home"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_gravity="bottom"
            android:layout_weight="1"
            android:gravity="center">

            <ImageView
                android:id="@+id/dd"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_centerHorizontal="true"
                android:src="@drawable/home_selector"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/dd"
                android:layout_centerInParent="true"
                android:text="@string/home"
                android:textColor="@color/tab_text_color"
                android:textSize="10sp"/>

        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/tab_community"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center">

            <ImageView
                android:id="@+id/dd2"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_centerHorizontal="true"
                android:src="@drawable/community_selector"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/dd2"
                android:layout_centerHorizontal="true"
                android:text="@string/community"
                android:textColor="@color/tab_text_color"
                android:textSize="10sp"/>

        </RelativeLayout>

        <RelativeLayout
            android:layout_width="80dp"
            android:layout_height="90dp"
            android:layout_gravity="bottom">

            <ImageView
                android:id="@+id/dd5"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_centerInParent="true"
                android:src="@drawable/jia"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/dd5"
                android:layout_centerInParent="true"
                android:padding="2dp"
                android:text="@string/send"
                android:textSize="10sp"/>

        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/tab_message"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center">

            <ImageView
                android:id="@+id/dd3"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true"
                android:src="@drawable/xiaoxi_selector"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/dd3"
                android:layout_centerHorizontal="true"
                android:text="@string/message"
                android:textColor="@color/tab_text_color"
                android:textSize="10sp"/>

        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/tab_mine"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center">

            <ImageView
                android:id="@+id/dd4"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_centerHorizontal="true"
                android:src="@drawable/wode_selector"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/dd4"
                android:layout_centerHorizontal="true"
                android:text="@string/mine"
                android:textColor="@color/tab_text_color"
                android:textSize="10sp"/>

        </RelativeLayout>

    </LinearLayout>

</RelativeLayout>
  • 3.icon selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/home_active" android:state_selected="true"/>
    <item android:drawable="@drawable/home_active" android:state_checked="true"/>
    <item android:drawable="@drawable/home_normal"/>

</selector>
  • 4.text selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/brown" android:state_selected="true" />
    <item android:color="@color/tab_normal_color" />
</selector>
  • 5.viewpager
/**
 * 设置viewpager不可滑动 默认可以滑动
 */

public class CustomViewPager extends ViewPager {

    private boolean isScroll = false;

    public CustomViewPager(Context context) {
        super(context);
    }

    public CustomViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    /**
     * Sets scroll. true 可以滑动  false 不可以滑动
     *
     * @param isScroll the is scroll
     */
    public void setScroll(boolean isScroll) {
        this.isScroll = isScroll;
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        return isScroll && super.onTouchEvent(ev);
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        return isScroll && super.onInterceptTouchEvent(ev);
    }

    @Override
    public void setCurrentItem(int item) {
        setCurrentItem(item,false);
    }
}
pan_blog
关注
专栏目录
FragmentTabhost
06-10
tabhost在API13以后就不用了呢，fragmentTabhost是它的替换类
Fragment + TabHost + RadioGroup 结合DEMO
09-20
在Android开发中，`Fragment`、`TabHost`和`RadioGroup`是三种常见的组件...通过理解并实践这个DEMO，开发者能够更好地掌握在Android中使用Fragment、TabHost和RadioGroup的技巧，从而创建出更加复杂的交互式应用程序。
FragmentTabHost
热门推荐
liu149339750的专栏
02-22 2万+
继承自TabHost，方便使用TabHost+Fragment的类。来自android.support.v4.app包。 1.定义XML，比如 <android.support.v4.app.FragmentTabHost android:layout_height="wrap_content" android:layout_width="fill_parent"
Fragment+FragmentTabHost
航天飞哥的博客
03-19 1058
关于Fragment类在之前的安卓开发复习笔记——Fragment+ViewPager组件(高仿微信界面)也介绍过，这里就不再重复阐述了。 国际惯例，先来张效果图：   下面直接上代码了，注释很全，看过我前2篇文章的朋友，肯定秒懂的，哈哈~   activity_main.xml（主布局文件） 1 LinearLayout xmlns:andr
FragmentTabHost的使用
lunious的博客
12-30 368
FragmentTabHost的使用
使用Fragment+Tabhost实现网易新闻客户端的框架
08-10
3. 添加`Fragment`到`TabHost`：使用`TabHost`的`setup()`方法初始化`FragmentTransaction`，将`Fragment`添加到`TabHost`中，并关联到对应的`TabSpec`。 4. 数据加载：`Fragment`内实现网络请求或本地数据加载，...
使用Fragment+Tabhost实现切换
10-09
在Android应用开发中，"使用Fragment+Tabhost实现切换"是一种常见的设计模式，它能够创建出功能丰富的用户界面，尤其适合在平板电脑和大屏幕设备上展现多面板布局。Fragment是Android 3.0（API级别11）引入的一个...
fragment+侧边栏+tabhost完整例子
01-07
FragmentTabHost是TabHost的一个扩展，允许开发者在每个标签页中使用Fragment来管理内容。与传统的TabHost不同，FragmentTabHost使得在不同标签之间切换时可以保持状态，提供了更现代且灵活的界面设计。在本例中，...
fragmenttabhost
01-07
fragmenttabhost 使用fragmenttabhost 使用fragmenttabhost 使用fragmenttabhost 使用fragmenttabhost 使用
FragmentTabHost.rar
05-15
FragmentTabHost使用简单示例。
Fragment实现TabHost效果
10-20
Android Tab 选项卡源代码，是一个很不错的Android源码，有兴趣的伙伴们抽时间可以看一下把
如何在Fragment中使用tabhost
weixin_34101784的博客
06-26 193
最近在做一个仿电商的APP，由于前面使用了Fragment技术，现在想要在一个Fragment中做出TabHost的界面效果，经过查找资料找到了解决办法，特分享出来！（新人勿喷！）首先要使用的控件是Support V4里面的控件，XML如图<android.support.v4.app.FragmentTabHost xmlns:android="...
fragment中加入tabhost以及修改TabWidget
lansus的博客
10-23 1710
现在的应用的数据量越来越多，应用都需要在fragment中嵌入选项卡对信息进行分类，例如知乎、简述 但是在fragmen中嵌入tabHost，我不支持用其他的方法去实现仿按钮，因为多少会有点别扭闲话少说，今天说的是在fragment里加入tabHost控件，因为fragment的控制文件class是只能继承一个类，所有无法再去继承TabActivity。我们需要采取的解决办法是： 现在fra
底部菜单栏（一）Fragment+FragmentTabHost 来实现底部菜单栏方式
CL
08-20 2461
这是一种实现底部导航栏的方法（方便简洁），也可以自定义布局，进行click；因此Fragment在一段时间内被疯狂的使用~源代码下载点：http://download.csdn.net/detail/cl18652469346/9608292 效果图在末尾·········（1）修改主布局代码，加入了FragmentTabHost 组件<?xml version="1.0" encoding="u
使用FragmentActivity+Fragment+FragmentTabHost实现底部标签栏
最新发布
06-06
好的，我可以为您解答。首先，您需要在布局文件中添加一个FragmentTabHost控件，用于显示底部标签栏。然后，您需要在Activity中继承Fragment...另外，由于使用了FragmentTabHost控件，因此需要引入support-v4库。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值