Fragment 实现底部导航栏的简单切换
来源：互联网 发布：php类与对象做出兔子 编辑：程序博客网 时间：2024/05/06 08:10
第一个Android App：
一直想入android这个坑，但一直因为各种原因拖到了现在，今天终于下定决心迈出了第一步。由于公司一直没有android的项目。所以也没有现成的设计和切图，这对于一个刚入坑的人来说真的挺痛苦的，后来实在没办法，就想到了我平时看小说的软件。经历各种办法终于从apk中拿到了切图。下面就开始吧，走起！
目标： 
不要想多，今天只是实现底部导航栏的点击切换。
1. 首先将页面的布局写好，这里不多说了。直接上代码。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <FrameLayout android:id="@+id/content" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" > </FrameLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="60dp" android:background="@drawable/home_bg_shape" > <RelativeLayout android:id="@+id/bookshelf_layout" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerVertical="true" android:orientation="vertical" > <ImageView android:id="@+id/home_bookshelf_image" android:layout_width="wrap_content" android:layout_height="30dp" android:layout_gravity="center_horizontal" android:src="@drawable/icon_home_tab_bookshelf_n" /> <TextView android:id="@+id/home_bookshelf_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:text="@string/bookshelf" android:textColor="#82858b" /> </LinearLayout> </RelativeLayout> <RelativeLayout android:id="@+id/searchbook_layout" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerVertical="true" android:orientation="vertical" > <ImageView android:id="@+id/home_searchbook_image" android:layout_width="wrap_content" android:layout_height="30dp" android:layout_gravity="center_horizontal" android:src="@drawable/icon_home_tab_searchbook_n" /> <TextView android:id="@+id/searchbook_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:text="@string/free" android:textColor="#82858b" /> </LinearLayout> </RelativeLayout> <RelativeLayout android:id="@+id/bookstore_layout" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerVertical="true" android:orientation="vertical" > <ImageView android:id="@+id/home_bookstore_image" android:layout_width="wrap_content" android:layout_height="30dp" android:layout_gravity="center_horizontal" android:src="@drawable/icon_home_tab_bookstore_n" /> <TextView android:id="@+id/bookstore_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:text="@string/bookstore" android:textColor="#82858b" /> </LinearLayout> </RelativeLayout> <RelativeLayout android:id="@+id/writer_layout" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerVertical="true" android:orientation="vertical" > <ImageView android:id="@+id/writer_image" android:layout_width="wrap_content" android:layout_height="30dp" android:layout_gravity="center_horizontal" android:src="@drawable/icon_home_tab_writer_n" /> <TextView android:id="@+id/writer_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:text="@string/writer" android:textColor="#82858b" /> </LinearLayout> </RelativeLayout> <RelativeLayout android:id="@+id/me_layout" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerVertical="true" android:orientation="vertical" > <ImageView android:id="@+id/me_image" android:layout_width="wrap_content" android:layout_height="30dp" android:layout_gravity="center_horizontal" android:src="@drawable/icon_home_tab_me_n" /> <TextView android:id="@+id/me_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:text="@string/me" android:textColor="#82858b" /> </LinearLayout> </RelativeLayout> </LinearLayout></LinearLayout>我们运行一下：
效果已经出来了，下面我们就为每个按钮创建一个对应的Fragment：
先创建5个layout文件
bookshelf_layout.xml
<?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" > <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:padding="10dp" android:text="@string/bookshelf" android:textSize="20sp" /> </LinearLayout></RelativeLayout>searchbook_layout.xml
<?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" > <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:padding="10dp" android:text="@string/free" android:textSize="20sp" /> </LinearLayout></RelativeLayout>bookstore_layout.xml
<?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" > <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:padding="10dp" android:text="@string/bookstore" android:textSize="20sp" /> </LinearLayout></RelativeLayout>writer_layout.xml
<?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" > <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:padding="10dp" android:text="@string/writer" android:textSize="20sp" /> </LinearLayout></RelativeLayout>me_layout.xml
<?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" > <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:padding="10dp" android:text="@string/me" android:textSize="20sp" /> </LinearLayout></RelativeLayout>在创建对应的Fragment 类
BookShelfFragment
package com.example.xxxx.anytravel.fragment;import android.app.Fragment;import android.os.Bundle;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import com.example.xxxx.anytravel.R;public class BookShelfFragment extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View bookshelfLayout = inflater.inflate(R.layout.bookshelf_layout, container, false); return bookshelfLayout; }}SearchBookFragment
package com.example.xxxx.anytravel.fragment;import android.app.Fragment;import android.os.Bundle;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import com.example.xxxx.anytravel.R;public class SearchBookFragment extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View searchBookLayout = inflater.inflate(R.layout.searchbook_layout, container, false); return searchBookLayout; }}BooKStoreFragment
package com.example.xxxx.anytravel.fragment;import android.app.Fragment;import android.os.Bundle;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import com.example.xxxx.anytravel.R;public class BooKStoreFragment extends Fragment { public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View bookstoreLayout = inflater.inflate(R.layout.bookstore_layout, container, false); return bookstoreLayout; }}WriteFragment
package com.example.xxxx.anytravel.fragment;import android.app.Fragment;import android.os.Bundle;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import com.example.pengq.anytravel.R;public class WriteFragment extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View writeLayout = inflater.inflate(R.layout.writer_layout, container, false); return writeLayout; }}MeFragment
package com.example.xxxx.anytravel.fragment;import android.app.Fragment;import android.os.Bundle;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import com.example.pengq.anytravel.R;public class MeFragment extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View meLayout = inflater.inflate(R.layout.me_layout, container, false); return meLayout; }}好了，到了这里准备工作已经完成下面只要实现按钮的点击事件并且加载对应的页面即可；
package com.example.xxxx.anytravel.activity;import android.app.FragmentManager;import android.app.FragmentTransaction;import android.graphics.Color;import android.os.Bundle;import android.view.View;import android.widget.ImageView;import android.widget.TextView;import com.example.pengq.anytravel.R;import com.example.pengq.anytravel.fragment.BooKStoreFragment;import com.example.pengq.anytravel.fragment.BookShelfFragment;import com.example.pengq.anytravel.fragment.MeFragment;import com.example.pengq.anytravel.fragment.SearchBookFragment;import com.example.pengq.anytravel.fragment.WriteFragment;import java.util.ArrayList;import java.util.List;public class MainActivity extends BaseActivity implements View.OnClickListener { private BookShelfFragment bookShelfFragment; private BooKStoreFragment booKStoreFragment; private SearchBookFragment searchBookFragment; private WriteFragment writeFragment; private MeFragment meFragment; private List<View> bottomTabs; private View bookshelfLayout; private View searchBookLayout; private View bookStoreLayout; private View writerLayout; private View meLayout; private ImageView bookshelfImage; private ImageView searchbookImage; private ImageView bookstoreImage; private ImageView writerImage; private ImageView meImage; private TextView bookshelfText; private TextView searchBookText; private TextView bookStoreText; private TextView writerText; private TextView meText; private FragmentManager fragmentManager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); if (getSupportActionBar() != null) { getSupportActionBar().hide(); } setContentView(R.layout.activity_main); initViews(); fragmentManager = getFragmentManager(); setSelectTab(0); } private void initViews() { bookshelfLayout = findViewById(R.id.bookshelf_layout); searchBookLayout = findViewById(R.id.searchbook_layout); bookStoreLayout = findViewById(R.id.bookstore_layout); writerLayout = findViewById(R.id.writer_layout); meLayout = findViewById(R.id.me_layout); bookshelfImage = (ImageView) findViewById(R.id.home_bookshelf_image); searchbookImage = (ImageView) findViewById(R.id.home_searchbook_image); bookstoreImage = (ImageView) findViewById(R.id.home_bookstore_image); writerImage = (ImageView) findViewById(R.id.writer_image); meImage = (ImageView) findViewById(R.id.me_image); bookshelfText = (TextView) findViewById(R.id.home_bookshelf_text); searchBookText = (TextView) findViewById(R.id.searchbook_text); bookStoreText = (TextView) findViewById(R.id.bookstore_text); writerText = (TextView) findViewById(R.id.writer_text); meText = (TextView) findViewById(R.id.me_text); bookshelfLayout.setOnClickListener(this); searchBookLayout.setOnClickListener(this); bookStoreLayout.setOnClickListener(this); writerLayout.setOnClickListener(this); meLayout.setOnClickListener(this); bottomTabs = new ArrayList<>(5); bottomTabs.add(bookshelfLayout); bottomTabs.add(searchBookLayout); bottomTabs.add(bookStoreLayout); bottomTabs.add(writerLayout); bottomTabs.add(meLayout); } private void setSelectTab(int index) { clearSelection(); // 开启一个Fragment事务 FragmentTransaction transaction = fragmentManager.beginTransaction(); // 先隐藏掉所有的Fragment，以防止有多个Fragment显示在界面上的情况 hideFragments(transaction); switch (index) { case 0: bookshelfImage.setImageResource(R.drawable.icon_home_tab_bookshelf_p); bookshelfText.setTextColor(Color.parseColor("#00c98d")); if (bookShelfFragment == null) { bookShelfFragment = new BookShelfFragment(); transaction.add(R.id.content, bookShelfFragment); } else { transaction.show(bookShelfFragment); } break; case 1: searchbookImage.setImageResource(R.drawable.icon_home_tab_searchbook_p); searchBookText.setTextColor(Color.parseColor("#00c98d")); if (searchBookFragment == null) { searchBookFragment = new SearchBookFragment(); transaction.add(R.id.content, searchBookFragment); } else { transaction.show(searchBookFragment); } break; case 2: bookstoreImage.setImageResource(R.drawable.icon_home_tab_bookstore_p); bookStoreText.setTextColor(Color.parseColor("#00c98d")); if (booKStoreFragment == null) { booKStoreFragment = new BooKStoreFragment(); transaction.add(R.id.content, booKStoreFragment); } else { transaction.show(booKStoreFragment); } break; case 3: writerImage.setImageResource(R.drawable.icon_home_tab_writer_p); writerText.setTextColor(Color.parseColor("#00c98d")); if (writeFragment == null) { writeFragment = new WriteFragment(); transaction.add(R.id.content, writeFragment); } else { transaction.show(writeFragment); } break; case 4: meImage.setImageResource(R.drawable.icon_home_tab_me_p); meText.setTextColor(Color.parseColor("#00c98d")); if (meFragment == null) { meFragment = new MeFragment(); transaction.add(R.id.content, meFragment); } else { transaction.show(meFragment); } break; default: break; } transaction.commit(); } @Override public void onClick(View v) { switch (v.getId()) { case R.id.bookshelf_layout: setSelectTab(0); break; case R.id.searchbook_layout: setSelectTab(1); break; case R.id.bookstore_layout: setSelectTab(2); break; case R.id.writer_layout: setSelectTab(3); break; case R.id.me_layout: setSelectTab(4); break; default: break; } } private void clearSelection() { bookshelfImage.setImageResource(R.drawable.icon_home_tab_bookshelf_n); bookshelfText.setTextColor(Color.parseColor("#82858b")); searchbookImage.setImageResource(R.drawable.icon_home_tab_searchbook_n); searchBookText.setTextColor(Color.parseColor("#82858b")); bookstoreImage.setImageResource(R.drawable.icon_home_tab_bookstore_n); bookStoreText.setTextColor(Color.parseColor("#82858b")); writerImage.setImageResource(R.drawable.icon_home_tab_writer_n); writerText.setTextColor(Color.parseColor("#82858b")); meImage.setImageResource(R.drawable.icon_home_tab_me_n); meText.setTextColor(Color.parseColor("#82858b")); } private void hideFragments(FragmentTransaction transaction) { if (bookShelfFragment != null) { transaction.hide(bookShelfFragment); } if (searchBookFragment != null) { transaction.hide(searchBookFragment); } if (booKStoreFragment != null) { transaction.hide(booKStoreFragment); } if (writeFragment != null) { transaction.hide(writeFragment); } if (meFragment != null) { transaction.hide(meFragment); } }}好，上图（原谅我不会动图）
阅读全文
1 0
- Fragment 实现底部导航栏的简单切换
- Android个人学习笔记-底部导航切换Fragment的实现
- android基于Fragment实现底部导航切换
- Fragment之底部导航栏的实现
- Fragment底部导航栏的实现
- Fragment实现的底部导航
- 底部导航栏实现页面的切换（一）：Fragment + LinearLayout + TextView
- 底部导航栏实现页面的切换（二）：Fragment + RadioGroup
- 底部导航栏实现页面的切换（三）：Fragment + RadioGroup + ViewPager
- Fragment底部导航栏实现
- 【简单项目框架一】Fragment实现的底部导航
- 【简单项目框架一】Fragment实现的底部导航
- Fragment实现底部导航
- 底部导航的简单实现
- TextView+Fragment实现底部导航栏
- Fragment和ViewPager实现底部导航栏
- TextView+Fragment实现底部导航栏
- RadioButton+Fragment实现底部导航栏
- codeforces 779C Dishonest Sellers
- HDU5809（KD-tree）
- BZOJ 2434 阿狸的打字机 补全AC自动机 ( Trie图 ) fail树 树状数组 DFS序列
- css3只让背景旋转
- tf函数总结（一）
- Fragment 实现底部导航栏的简单切换
- 【项目实战】自监控-08-DataFrame行列操作（下篇）
- day10 hashmap hashtable treemap等
- Android6.0 在framwoard 层系统拦截HOME键
- sql*plus
- 布局常用标签名
- BLUENESSG 早一日受苦、早一日解决、早一日浴火重生 Maven多模块，Dubbo分布式服务框架，SpringMVC，前后端分离项目，基础搭建，搭建过程出现的问题
- N皇后
- git本地项目的步骤
