Android仿今日头条首页的顶部标签栏和底部导航栏
Android仿今日头条首页的顶部标签栏和底部导航栏
效果图:
<?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.myapplication.activity.MainActivity"> <FrameLayout android:id="@+id/fl_fragment_content" android:layout_width="match_parent" android:layout_height="0dp" android:background="#bababa" android:layout_weight="1"> <!-- 存放四个Fragment--> </FrameLayout> <!-- 底部的四个选项菜单--> <LinearLayout android:background="#ffffff" android:layout_width="match_parent" android:layout_height="49dp"> <!--四个部分都一样:ImageView + TextView--> <RelativeLayout android:id="@+id/rl_first_layout" android:layout_width="0dp" android:layout_weight="1" android:layout_height="match_parent" android:gravity="center"> <ImageView android:id="@+id/iv_first_home" android:src="@drawable/icon_homepage_selector" android:layout_width="24dp" android:layout_centerHorizontal="true" android:layout_height="24dp" /> <TextView 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"/> </RelativeLayout> <RelativeLayout android:id="@+id/rl_second_layout" android:layout_width="0dp" android:layout_weight="1" android:layout_height="match_parent" android:gravity="center"> <ImageView android:id="@+id/iv_second_match" android:src="@drawable/icon_matchpage_selector" android:layout_centerHorizontal="true" android:layout_width="24dp" android:layout_height="24dp" /> <TextView 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"/> </RelativeLayout> <RelativeLayout android:id="@+id/rl_third_layout" android:layout_width="0dp" android:layout_weight="1" android:layout_height="match_parent" android:gravity="center"> <ImageView android:id="@+id/iv_third_recommend" android:src="@drawable/icon_recommendpage_selector" android:layout_centerHorizontal="true" android:layout_width="24dp" android:layout_height="24dp" /> <TextView 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"/> </RelativeLayout> <RelativeLayout android:id="@+id/rl_four_layout" android:layout_width="0dp" android:layout_weight="1" android:layout_height="match_parent" android:gravity="center"> <ImageView android:id="@+id/iv_four_mine" android:src="@drawable/icon_minepage_selector" android:layout_centerHorizontal="true" android:layout_width="24dp" android:layout_height="24dp" /> <TextView 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"/> </RelativeLayout> </LinearLayout> </LinearLayout>
activity_main.xml效果图:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/home1" android:state_selected="true" /> <item android:drawable="@drawable/home11" /> </selector>
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:color ="#d81e06" android:state_selected="true"/> <item android:color ="#323232" /> </selector>
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <!--包含标题栏:图标+文字--> <RelativeLayout android:layout_width="match_parent" android:background="#d81e06" android:layout_height="50dp"> <ImageView android:layout_marginLeft="10dp" android:id="@+id/iv_logo_page" android:layout_width="wrap_content" android:layout_centerVertical="true" android:layout_height="wrap_content" /> <TextView 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" /> <TextView 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" /> </RelativeLayout> <FrameLayout android:id="@+id/fl_title_content_page" android:background="#AEAEAE" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"> <!--此入放置一个布局的原因:首页(Textview),赛程(内容),推荐... 使用方法addView(contentView)--> </FrameLayout> </LinearLayout>
通用布局的java代码:
/** * 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:
/** * 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() {} }
<?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="match_parent"> <TextView 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" /> </RelativeLayout>
//主页 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); }} }
最后效果图:
底部和顶部联合效果图:
添加依赖
dependencies {compile 'com.jaeger.statusbarutil:library:1.4.0'
}
<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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.support.design.widget.TabLayout 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.support.design.widget.TabLayout> <android.support.v4.view.ViewPager android:background="#dadada" android:id="@+id/vp_homepage_tab_content" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"> </android.support.v4.view.ViewPager> <!--<TextView--> <!--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" />--> <!--<FrameLayout--> <!--android:layout_width="match_parent"--> <!--android:layout_height="match_parent">--> <!--<!–实单,推荐,足球,篮球,竞彩,电竞,综合的片段内容–>--> <!--</FrameLayout>--> </LinearLayout>
/** * 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-array name="homepage_top_tab"> <item>实单</item> <item>推荐</item> <item>足球</item> <item>篮球</item> <item>竞彩</item> <item>电竞</item> <item>综合</item> </string-array>
/** * 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]; } }
/** * 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"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView 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" /> </LinearLayout>
其他页面一样
Android仿今日头条首页的顶部标签栏和底部导航栏相关推荐
- Android 仿今日头条首页标题栏效果
今天带来的是仿今日头条首页的联动滑动效果,废话不多说,先上效果图: 思路: 做这个我们需要实现的效果有 1.滑动内容区域,标题栏会有变化来显示当前所处的位置. 2.点击标题栏,内容区域也会随着滑动并跳 ...
- 转载 Android仿今日头条详情页实现
转载自@ice_Anson Android仿今日头条详情页实现 源码地址: Android仿今日头条详情页实现 github源码地址 动态图 最近项目有个需求,需要实现一个和今日头条新闻详情页一样的体 ...
- android仿今日头条个人中心页面
android仿今日头条个人中心页面 效果图 实现步骤: 自定义ScrollView,添加一个反弹的动画 代码: package com.example.administrator.gerenzhon ...
- Android 仿今日头条频道管理(下)(GridView之间Item的移动和拖拽)
前言 上篇博客我们说到了今日头条频道管理的操作交互体验,我也介绍了2个GridView之间Item的相互移动.详情请參考:Android 仿今日头条频道管理(上)(GridView之间Item的移动和 ...
- vue 仿今日头条_vue实现仿今日头条首页选项卡的功能 -
...的 Web 界面.当和其它网络工具配合使用时,Vue.js 的优秀功能会得到大大加强.如今,已有许多开发人员开始使用 Vue.js 来取代 Angular 和 React.js .那么对于 An ...
- android 今日头条加载动画,Android 仿今日头条简单的刷新效果实例代码
点击按钮,先自动进行下拉刷新,也可以手动刷新,刷新完后,最后就多一行数据.有四个选项卡. 前两天导师要求做一个给本科学生预定机房座位的app,出发点来自这里.做着做着遇到很多问题,都解决了.这个效果感 ...
- Android 仿今日头条评论时键盘自动弹出的效果
Android 仿今日头条评论时键盘自动弹出的效果:当点击评论时,弹出对话框,同时弹出软键盘,当点击返回键时,将对话框关闭,不只是关闭软键盘. 效果图: 对这个对话框设置一个style效果: < ...
- Android仿今日头条的开源项目
起因 看到众多大神纷纷有了自己的开源项目,于是自己琢磨着也想做一个开源项目来学习下,因为每次无聊必刷的app就是今日头条,评论简直比内容都精彩,所以我打算仿今日头条来练练手,期间也曾放弃过,也遇到很多 ...
- Android仿今日头条开源项目
起因 看到众多大神纷纷有了自己的开源项目,于是自己琢磨着也想做一个开源项目来学习下,因为每次无聊必刷的app就是今日头条,评论简直比内容都精彩,所以我打算仿今日头条来练练手,期间也曾放弃过,也遇到很多 ...
最新文章
- logback logback.xml常用配置详解(三) filter
- ionic 添加地图定位功能
- matlab处理svm的数据,SVM-GUI 使用支持向量机(SVM)算法进行处理数据,提取特征参数,并通过MATLAB界面显示相关数 238万源代码下载- www.pudn.com...
- Qt笔记-进程只能存在1个(Linux适用,Windows有思路)
- Java之WeakReference与SoftReference使用讲解
- docker 安全性问题
- mysql之查询前几条或者中间某几行数据
- 濮阳第二届创客机器人比赛_【比赛】许昌市第二届机器人大赛成功举办
- 拉丁舞身形研究之恰恰恰
- centos7部署calamari
- 异步爬取有道词典(入门js逆向)
- 手动删除病毒经历【usgop.exe】
- 双向晶闸管控制AC220V电机
- log4j:ERROR Either File or DatePattern options are not set for appender [E].
- java unsafe park_java – Unsafe.park vs Object.wait
- [青少年][scratch]自制积木块讲解
- 如何用matlab将彩色图片转为单通道绿色图片
- 《惢客创业日记》2021.06.21-22(周一)创业者融资成本有多高?
- 1.2 Python开发环境配置 | Python语言程序设计(嵩天)
- 武汉市高新技术企业认定可以享受哪些税收优惠政策?认定条件如何?