Fragment 实现底部导航栏的简单切换
2017-07-28 19:32
330 查看
第一个Android App:
一直想入android这个坑,但一直因为各种原因拖到了现在,今天终于下定决心迈出了第一步。由于公司一直没有android的项目。所以也没有现成的设计和切图,这对于一个刚入坑的人来说真的挺痛苦的,后来实在没办法,就想到了我平时看小说的软件。经历各种办法终于从apk中拿到了切图。下面就开始吧,走起!
目标:
不要想多,今天只是实现底部导航栏的点击切换。
1. 首先将页面的布局写好,这里不多说了。直接上代码。
我们运行一下:
效果已经出来了,下面我们就为每个按钮创建一个对应的Fragment:
先创建5个layout文件
bookshelf_layout.xml
searchbook_layout.xml
bookstore_layout.xml
writer_layout.xml
me_layout.xml
在创建对应的Fragment 类
BookShelfFragment
SearchBookFragment
BooKStoreFragment
WriteFragment
MeFragment
好了,到了这里准备工作已经完成下面只要实现按钮的点击事件并且加载对应的页面即可;
好,上图(原谅我不会动图)
一直想入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); } } }
好,上图(原谅我不会动图)
相关文章推荐
- 底部导航栏实现页面的切换(一):Fragment + LinearLayout + TextView
- Android实现简单底部导航栏 Android仿微信滑动切换效果
- 底部导航栏实现页面的切换(二):Fragment + RadioGroup
- FragmentController实现项目中底部导航栏切换的UI框架
- 安卓APP底部导航栏(有消息圆点指示器),实现fragment切换(eclipse)
- 底部导航栏实现页面的切换(三):Fragment + RadioGroup + ViewPager
- Android项目ViewPager+Fragment+RadioButton实现底部导航栏切换
- Fragment和ViewPager实现底部导航栏
- 使用Fragment实现底部菜单的切换
- Android 实现同个Activity中存在多个Fragment多次切换之后依次返回(一)(Fragment回退栈简单使用)
- Fragment的应用之底部导航栏的实现(一)
- Fragment实例精讲——底部导航栏+ViewPager滑动切换页面
- 实现底部导航栏及切换tab重新加载的问题解决
- FragmentTabHost FrameLayout实现底部导航栏
- android中fragment实现底部标签页的切换
- 【简单项目框架一】Fragment实现的底部导航
- Fragment实现底部选项卡切换效果
- 安卓用Fragment+RadioButton组合构成的底部导航栏的实现
- 【Android UI设计与开发】4.底部菜单栏(一)Fragment介绍和简单实现
- ThumbnailMenu 一个简单而精致的 Fragment 菜单控件,以缩略图的形式实现 Fragment 切换