Android仿今日头条首页的顶部标签栏和底部导航栏

先是底部导航栏TextView+ImageView+Fragment: 效果图:
activity_main.xml布局:

<?xml version="1.0" encoding="utf-8"?>    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.myapplication.activity.MainActivity">            android:id="@+id/fl_fragment_content"        android:layout_width="match_parent"        android:layout_height="0dp"        android:background="#bababa"        android:layout_weight="1">                            android:background="#ffffff"        android:layout_width="match_parent"        android:layout_height="49dp">                            android:id="@+id/rl_first_layout"            android:layout_width="0dp"            android:layout_weight="1"            android:layout_height="match_parent"            android:gravity="center">                            android:id="@+id/iv_first_home"                android:src="@drawable/icon_homepage_selector"                android:layout_width="24dp"                android:layout_centerHorizontal="true"                android:layout_height="24dp" />                            android:id="@+id/tv_first_home"                android:textColor="@drawable/text_selector_color"                android:text="首页"                android:layout_below="@+id/iv_first_home"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_centerHorizontal="true"                android:layout_gravity="center_horizontal"/>                            android:id="@+id/rl_second_layout"            android:layout_width="0dp"            android:layout_weight="1"            android:layout_height="match_parent"            android:gravity="center">                            android:id="@+id/iv_second_match"                android:src="@drawable/icon_matchpage_selector"                android:layout_centerHorizontal="true"                android:layout_width="24dp"                android:layout_height="24dp" />                            android:id="@+id/tv_second_match"                android:textColor="@drawable/text_selector_color"                android:text="赛程"                android:layout_below="@+id/iv_second_match"                android:layout_centerHorizontal="true"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_gravity="center_horizontal"/>                            android:id="@+id/rl_third_layout"            android:layout_width="0dp"            android:layout_weight="1"            android:layout_height="match_parent"            android:gravity="center">                            android:id="@+id/iv_third_recommend"                android:src="@drawable/icon_recommendpage_selector"                android:layout_centerHorizontal="true"                android:layout_width="24dp"                android:layout_height="24dp" />                            android:id="@+id/tv_third_recommend"                android:textColor="@drawable/text_selector_color"                android:text="推荐"                android:layout_below="@+id/iv_third_recommend"                android:layout_centerHorizontal="true"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_gravity="center_horizontal"/>                            android:id="@+id/rl_four_layout"            android:layout_width="0dp"            android:layout_weight="1"            android:layout_height="match_parent"            android:gravity="center">                            android:id="@+id/iv_four_mine"                android:src="@drawable/icon_minepage_selector"                android:layout_centerHorizontal="true"                android:layout_width="24dp"                android:layout_height="24dp" />                            android:id="@+id/tv_four_mine"                android:textColor="@drawable/text_selector_color"                android:text="我的"                android:layout_below="@+id/iv_four_mine"                android:layout_centerHorizontal="true"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_gravity="center_horizontal"/>

activity_main.xml效果图:
图标选择器: (icon_homepage_selector.xml)

<?xml version="1.0" encoding="utf-8"?>xmlns:android="http://schemas.android.com/apk/res/android">android:drawable="@drawable/home1" android:state_selected="true" />android:drawable="@drawable/home11" />

文字选择器: (text_selector_color.xml)

<?xml version="1.0" encoding="utf-8"?>xmlns:android="http://schemas.android.com/apk/res/android">    android:color ="#d81e06" android:state_selected="true"/>    android:color ="#323232" />

写个通用的带标题,图片的标题栏布局: (base_top_title_page.xml) (有些页面需要标题,有些不需要标题,所以第一个TextView的标题gone了)

<?xml version="1.0" encoding="utf-8"?>xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical" android:layout_width="match_parent"    android:layout_height="match_parent">                android:layout_width="match_parent"        android:background="#d81e06"        android:layout_height="50dp">                    android:layout_marginLeft="10dp"            android:id="@+id/iv_logo_page"            android:layout_width="wrap_content"            android:layout_centerVertical="true"            android:layout_height="wrap_content" />                    android:id="@+id/tv_title_page"            android:visibility="gone"            android:text="我是标题"            android:textSize="20sp"            android:textColor="#FFFFFF"            android:layout_width="wrap_content"            android:layout_centerInParent="true"            android:layout_height="wrap_content" />                    android:id="@+id/tv_paypal_page"            android:text="充值"            android:textSize="20sp"            android:textColor="#FFFFFF"            android:layout_alignParentRight="true"            android:layout_centerVertical="true"            android:layout_marginRight="15dp"            android:layout_width="wrap_content"            android:layout_height="wrap_content" />                android:id="@+id/fl_title_content_page"        android:background="#AEAEAE"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1">

通用布局的java代码: (BasePageTitleFragent)

/** * Created by liuzihao on 2018/1/17. * 通用 图片 充值的Fragment的基类 */public abstract class BasePageTitleFragent extends Fragment {    private View mFragmentView;//父控件(由父控件找到子控件)    private ImageView mIvLogoPage;    private TextView mTvTitlePage;    private TextView mTvPaypalPage;    private FrameLayout mFlTitleContentPage;    @Override    public void onCreate(@Nullable Bundle savedInstanceState) {        super.onCreate(savedInstanceState);    }    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        mFragmentView = inflater.inflate(R.layout.base_top_title_page, container, false);   //通用布局(图片 充值)        mIvLogoPage = (ImageView) mFragmentView.findViewById(R.id.iv_logo_page);        mTvTitlePage = (TextView) mFragmentView.findViewById(R.id.tv_title_page);        mTvPaypalPage = (TextView) mFragmentView.findViewById(R.id.tv_paypal_page);        mFlTitleContentPage = (FrameLayout) mFragmentView.findViewById(R.id.fl_title_content_page);        View view = initView();        mFlTitleContentPage.addView(view);        return mFragmentView;    }    public void setTitleIcon(String msg, boolean show) {    //设置标题和图标        mTvTitlePage.setText(msg);  //设置标题        mTvTitlePage.setVisibility(show ? View.VISIBLE : View.GONE);     //设置标题显示  true就是显示  false就是不显示    }    @Override    public void onActivityCreated(@Nullable Bundle savedInstanceState) {        super.onActivityCreated(savedInstanceState);        initData();    }    protected abstract View initView();    protected abstract void initData();}

创建4个Fragment: (HomePageFragment...)

/** * Created by liuzihao on 2018/1/18. * 首页片段 */public class HomePageFragment extends BasePageTitleFragent {    @Override    protected View initView() {        setTitleIcon("",false); //设置第一个首页不显示标题        View homeFragment = View.inflate(getContext(), R.layout.fg_homepage, null);        return homeFragment ;    }    @Override    protected void initData() {    }}

/** * Created by liuzihao on 2018/1/18. * 赛程片段 */public class MatchPageFragment extends BasePageTitleFragent {    @Override    public View initView() {        setTitleIcon("赛程",true);        View matchFragment = View.inflate(getContext(), R.layout.fg_matchpage, null);        return matchFragment;    }    @Override    public void initData() {    }}

/** * Created by liuzihao on 2018/1/18. * 推荐片段 */public class RecommendPageFragment extends BasePageTitleFragent {    @Override    public View initView() {        setTitleIcon("推荐",true);        View recommendFragment = View.inflate(getContext(), R.layout.fg_recommendpage, null);        return recommendFragment;    }    @Override    public void initData() {    }}

/** * Created by liuzihao on 2018/1/18. * 我的片段 */public class MinePageFragment extends BasePageTitleFragent {    @Override    public View initView() {        setTitleIcon("个人中心",true);        View mineFragment = View.inflate(getContext(), R.layout.fg_minepage, null);        return mineFragment;    }    @Override    public void initData() {    }}

Fragment的xml布局: (fg_homepage.xml) (cv3个)

<?xml version="1.0" encoding="utf-8"?>xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent">    android:id="@+id/tv_homepage_content"    android:text="首页片段xml"    android:textSize="29sp"    android:layout_centerInParent="true"    android:layout_width="wrap_content"    android:layout_height="wrap_content" />

MainActivity:

//主页public class MainActivity extends AppCompatActivity implements View.OnClickListener {    //初始化fragment    private HomePageFragment mHomePageFragment;    private MatchPageFragment mMatchPageFragment;    private RecommendPageFragment mRecommendPageFragment;    private MinePageFragment mMinePageFragment;    //片段类容    private FrameLayout mFlFragmentContent;    //底部4个按钮    private RelativeLayout mRlFirstLayout;    private RelativeLayout mRlSecondLayout;    private RelativeLayout mRlThirdLayout;    private RelativeLayout mRlFourLayout;    private ImageView mIvFirstHome;    private TextView mTvFirstHome;    private ImageView mIvSecondMatch;    private TextView mTvSecondMatch;    private ImageView mIvThirdRecommend;    private TextView mTvThirdRecommend;    private ImageView mIvFourMine;    private TextView mTvFourMine;    private FragmentManager mFragmentManager;    private FragmentTransaction mTransaction;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        mFragmentManager = getSupportFragmentManager();        //=============================沉侵式状态栏S================================        //设置状态栏颜色,必须在setContentView之后使用        //第一个参数:当前页面;第二个参数:颜色;第三个参数:透明度;        StatusBarUtil.setColor(this, getResources().getColor(R.color.colorStatusBar), 0);        //=============================沉侵式状态栏E================================        initView();     //初始化视图    }    //此方法可以让app启动页像微信一样,第一次(启动页运行),第二次(无启动页,直接进入主界面)//    @Override//    public void onBackPressed() {//        //super.onBackPressed();    不要调用父类//        Intent intent = new Intent(Intent.ACTION_MAIN);     //ACTION_MAIN主活动//        intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);     //标志活动新任务//        intent.addCategory(Intent.CATEGORY_HOME);           //类型//        startActivity(intent);//    }    private void initView() {        mFlFragmentContent = (FrameLayout) findViewById(R.id.fl_fragment_content);        mRlFirstLayout = (RelativeLayout) findViewById(R.id.rl_first_layout);        mIvFirstHome = (ImageView) findViewById(R.id.iv_first_home);        mTvFirstHome = (TextView) findViewById(R.id.tv_first_home);        mRlSecondLayout = (RelativeLayout) findViewById(R.id.rl_second_layout);        mIvSecondMatch = (ImageView) findViewById(R.id.iv_second_match);        mTvSecondMatch = (TextView) findViewById(R.id.tv_second_match);        mRlThirdLayout = (RelativeLayout) findViewById(R.id.rl_third_layout);        mIvThirdRecommend = (ImageView) findViewById(R.id.iv_third_recommend);        mTvThirdRecommend = (TextView) findViewById(R.id.tv_third_recommend);        mRlFourLayout = (RelativeLayout) findViewById(R.id.rl_four_layout);        mIvFourMine = (ImageView) findViewById(R.id.iv_four_mine);        mTvFourMine = (TextView) findViewById(R.id.tv_four_mine);        //给五个按钮设置监听器        mRlFirstLayout.setOnClickListener(this);        mRlSecondLayout.setOnClickListener(this);        mRlThirdLayout.setOnClickListener(this);        mRlFourLayout.setOnClickListener(this);        //默认第一个首页被选中高亮显示        mRlFirstLayout.setSelected(true);        mTransaction = mFragmentManager.beginTransaction();        mTransaction.replace(R.id.fl_fragment_content, new HomePageFragment());        mTransaction.commit();    }    @Override    public void onClick(View v) {        mTransaction = mFragmentManager.beginTransaction(); //开启事务        hideAllFragment(mTransaction);        switch (v.getId()){            //首页            case R.id.rl_first_layout:            seleted();            mRlFirstLayout.setSelected(true);                if (mHomePageFragment == null) {                    mHomePageFragment = new HomePageFragment();                    mTransaction.add(R.id.fl_fragment_content,mHomePageFragment);    //通过事务将内容添加到内容页                }else{                    mTransaction.show(mHomePageFragment);                }                break;            //赛程            case R.id.rl_second_layout:                seleted();                mRlSecondLayout.setSelected(true);                if (mMatchPageFragment == null) {                    mMatchPageFragment = new MatchPageFragment();                    mTransaction.add(R.id.fl_fragment_content,mMatchPageFragment);    //通过事务将内容添加到内容页                }else{                    mTransaction.show(mMatchPageFragment);                }                break;            //推荐            case R.id.rl_third_layout:                seleted();                mRlThirdLayout.setSelected(true);                if (mRecommendPageFragment == null) {                    mRecommendPageFragment = new RecommendPageFragment();                    mTransaction.add(R.id.fl_fragment_content,mRecommendPageFragment);    //通过事务将内容添加到内容页                }else{                    mTransaction.show(mRecommendPageFragment);                }                break;            //个人中心            case R.id.rl_four_layout:                seleted();                mRlFourLayout.setSelected(true);                if (mMinePageFragment == null) {                    mMinePageFragment = new MinePageFragment();                    mTransaction.add(R.id.fl_fragment_content,mMinePageFragment);    //通过事务将内容添加到内容页                }else{                    mTransaction.show(mMinePageFragment);                }                break;        }        mTransaction.commit();    }    //设置所有按钮都是默认都不选中    private void seleted() {        mRlFirstLayout.setSelected(false);        mRlSecondLayout.setSelected(false);        mRlThirdLayout.setSelected(false);        mRlFourLayout.setSelected(false);    }    //删除所有fragmtne    private void hideAllFragment(FragmentTransaction transaction) {        if (mHomePageFragment != null) {            transaction.hide(mHomePageFragment);        }        if (mMatchPageFragment != null) {            transaction.hide(mMatchPageFragment);        }        if (mRecommendPageFragment != null) {            transaction.hide(mRecommendPageFragment);        }        if (mMinePageFragment != null) {            transaction.hide(mMinePageFragment);        }    }}

最后效果图: ===================================================================== =====================================================================
顶部标签栏TabLayout+ViewPager+Fragment 底部和顶部联合效果图:

(需要在首页Fragment嵌套Fragment;使用TabLayout+ViewPager+Fragment) 先从首页fg布局里fg_homepage.xml开始写:
(需要添加design包)

<?xml version="1.0" encoding="utf-8"?>xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent">            android:id="@+id/tablayout_top_tab"        android:layout_width="match_parent"        android:layout_height="36dp"        app:tabMode="fixed"        app:tabIndicatorHeight="0dp"        app:tabSelectedTextColor="@color/colorRedUserNameCash"        app:tabTextColor="@color/colorGray">                android:background="#dadada"        android:id="@+id/vp_homepage_tab_content"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1">

然后回到首页HomePageFragment找控件,适配器,绑定

/** * Created by liuzihao on 2018/1/18. * 首页片段 */public class HomePageFragment extends BasePageTitleFragent {    private TabLayout mTablayoutTopTab;    private ViewPager mVpHomepageTabContent;    @Override    protected View initView() {        setTitleIcon("",false); //设置第一个首页不显示标题        View homeFragment = View.inflate(getContext(), R.layout.fg_homepage, null);        mTablayoutTopTab = (TabLayout) homeFragment.findViewById(R.id.tablayout_top_tab);        mVpHomepageTabContent = (ViewPager) homeFragment.findViewById(R.id.vp_homepage_tab_content);        return homeFragment ;    }    @Override    protected void initData() {        //=======================显示首页顶部标签栏S==========================        String[] mTitles =getResources().getStringArray(R.array.homepage_top_tab);        //MyTabPageAdapter()里的参数不能用getFragmentManager,否则滑动出去,再滑回来会没数据        mVpHomepageTabContent.setAdapter(new MyTabPageAdapter(getChildFragmentManager(),mTitles));        mTablayoutTopTab.setupWithViewPager(mVpHomepageTabContent);        //=======================显示首页顶部标签栏E==========================        //====================点击充值跳转充值页S===============        mTvHomePagePaypal.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                startActivity(new Intent(getContext(), TestActivity.class));            }        });        //====================点击充值跳转充值页E===============    }}

String[]下的代码

name="homepage_top_tab">    实单    推荐    足球    篮球    竞彩    电竞    综合

MyTabPageAdapter:

/** * Created by qq910 on 2018/1/23. */public class MyTabPageAdapter extends FragmentPagerAdapter {    private final String[] mTitlees;    public MyTabPageAdapter(FragmentManager fm, String[] titlees) {        super(fm);        this.mTitlees = titlees;    }    @Override    public Fragment getItem(int position) {        if (position == 0) {            return new RealSimpleFragment1();        } else if (position == 1) {            return new RecommendFragment2();        } else if (position == 2) {            return new FootballFragment3();        } else if (position == 3) {            return new BasketballFragment4();        } else if (position == 4) {            return new LotteryFragment5();        } else if (position == 5) {            return new CompetitionFragment6();        }        return new SynthesizeFragment7();    }    @Override    public int getCount() {        return mTitlees.length;    }    @Override    public CharSequence getPageTitle(int position) {        return mTitlees[position];    }}

标签栏的fg RealSimpleFragment1:

/** * Created by liuzihao on 2018/1/23. * 实单fg */public class RealSimpleFragment1 extends Fragment {    @Override    public void onCreate(@Nullable Bundle savedInstanceState) {        super.onCreate(savedInstanceState);    }    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        View realSimpleView = inflater.inflate(R.layout.fg_tab_realsimple, container, false);        return realSimpleView;    }    @Override    public void onActivityCreated(@Nullable Bundle savedInstanceState) {        super.onActivityCreated(savedInstanceState);    }}

fg_tab_realsimple.xml

<?xml version="1.0" encoding="utf-8"?>xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">        android:id="@+id/tv_tab_realsimple"    android:text="实单xml"    android:textSize="26sp"    android:textColor="#000"    android:layout_centerInParent="true"    android:layout_width="wrap_content"    android:layout_height="wrap_content" />

效果图

Android仿今日头条首页的顶部标签栏和底部导航栏

Android仿今日头条首页的顶部标签栏和底部导航栏

更多相关文章

随机推荐