【幻化万千戏红尘】qianfeng-Android-Day19_导航栏制作
2016-09-19 20:12
375 查看
Fragment、ViewPager实现TAB导航条效果
制作Tab书签导航条(书签选项卡)有多种方法:【特别提示:】注意几种创建Tab书签导航中Fragment生命周期的变化。
1、TabActivity+TabHost(已经过期)
2、Fragment + RadioGroup 【必要时首选】
3、Fragment + ViewPager + RadioGroup自定义固定导航条
【推荐使用】
4、Fragment + ViewPager 带滑动导航条
【推荐使用】
一、Fragment+RadioGroup实现导航效果
(一)、效果说明:
· 自定义导航条;· 导航条固定位置,不发生左右侧滑。
(二)、实现步骤:
1、特殊的布局文件;· 有一个LinearLayout节点用来替换Fragment
· 在LinearLayout节点下方可自定义布局,布局内可放置TextView及ImageView等控件来自定义导航条效果,但是一般推荐使用RadioGroup+RadioButton。
· 给RadioButton设置背景选择器,让RadioButton在不同状态下显示不同颜色。
2、初始化自定义选项卡导航条,并为选项卡设置单击监听事件(实际是RadioGroup的setOnCheckedChangeListener);
(三)、示例代码:
1、布局文件的代码:
<?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"
tools:context="org.mobiletrain.navigation.MainActivity">
<RadioGroup
android:id="@+id/rg"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_alignParentBottom="true"
android:background="#FFFFFF"
android:gravity="center"
android:orientation="horizontal">
<RadioButton
android:id="@+id/chat"
android:checked="true"
style="@style/my_rb_style"
android:text="聊天"/>
<RadioButton
android:id="@+id/friend"
style="@style/my_rb_style"
android:text="好友"/>
<RadioButton
android:id="@+id/find"
style="@style/my_rb_style"
android:text="发现"/>
<RadioButton
android:id="@+id/home"
style="@style/my_rb_style"
android:text="我"/>
</RadioGroup>
<LinearLayout
android:id="@+id/ll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@id/rg"
android:orientation="horizontal"></LinearLayout>
</RelativeLayout>
2、MainActivity核心代码:
public class MainActivityextends AppCompatActivity {
private Fragment
currentFragment;
@Override
protected void
onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
RadioGroup radioGroup = (RadioGroup) findViewById(R.id.rg);
radioGroup.setOnCheckedChangeListener(new
RadioGroup.OnCheckedChangeListener() {
@Override
public void
onCheckedChanged(RadioGroup group, int
checkedId) {
Fragment fragment = null;
switch (checkedId) {
case R.id.chat:
fragment = new
ChatFragment();
break;
case R.id.friend:
fragment = new
FriendFragment();
break;
case R.id.find:
fragment = new
FindFragment();
break;
case R.id.home:
fragment = new
HomeFragment();
break;
}
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
//判断fragment是否添加到事务中
if
(fragment.isAdded()) {
//将当前的Fragment隐藏,然后显示新的Fragment
transaction.hide(currentFragment).show(fragment);
} else {
//隐藏当前Fragment,同时添加新的Fragment
transaction.hide(currentFragment).add(R.id.ll, fragment);
}
transaction.commit();
currentFragment
= fragment;
}
});
currentFragment =
new ChatFragment();
getSupportFragmentManager().beginTransaction().add(R.id.ll,
currentFragment).commit();
}
}
二、Fragment + ViewPager+RadioGroup实现Tab效果:
(一)、Fragment+ViewPager+RadioGroup实现选项卡的步骤:
1、特殊的布局文件;· 有一个ViewPager节点用来装载Fragment
· 在ViewPager节点下方可自定义布局,布局内可放置TextView及ImageView等控件来自定义导航条效果,但是一般推荐使用RadioGroup+RadioButton。
· 给RadioButton设置背景选择器,让RadioButton在不同状态下显示不同颜色。
2、初始化自定义选项卡导航条,并为选项卡设置单击监听事件(实际是RadioGroup的setOnCheckedChangeListener);
3、初始化ViewPager;
· 创建ViewPager对象:通过findViewById()方法来实现即可;
· 定义ViewPager中的数据源List<Fragment>;
· 自定义适配器,要继承于FragmentPagerAdapter,而不是PagerAdapter;
· 为ViewPager对象设置适配器;
· 给ViewPager设置监听器(addOnPageChangeListener)。
(二)、示例代码:
1、布局文件示例代码:<?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"
tools:context="org.mobiletrain.navigation.MainActivity">
<RadioGroup
android:id="@+id/rg"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_alignParentBottom="true"
android:background="#FFFFFF"
android:gravity="center"
android:orientation="horizontal">
<RadioButton
android:id="@+id/chat"
android:checked="true"
style="@style/my_rb_style"
android:text="聊天"/>
<RadioButton
android:id="@+id/friend"
style="@style/my_rb_style"
android:text="好友"/>
<RadioButton
android:id="@+id/find"
style="@style/my_rb_style"
android:text="发现"/>
<RadioButton
android:id="@+id/home"
style="@style/my_rb_style"
android:text="我"/>
</RadioGroup>
<android.support.v4.view.ViewPager
android:id="@+id/vp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@id/rg"
android:orientation="horizontal"></android.support.v4.view.ViewPager>
</RelativeLayout>
2、MainActivity中的核心代码:
public class MainActivity
extends AppCompatActivity {
private List<Fragment>
list;
private List<RadioButton>
radioButtons;
private ViewPager
viewPager;
@Override
protected void
onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = (ViewPager) findViewById(R.id.vp);
initData();
MyAdapter adapter = new
MyAdapter(getSupportFragmentManager(), list);
viewPager.setAdapter(adapter);
viewPager.addOnPageChangeListener(new
ViewPager.OnPageChangeListener() {
@Override
public void
onPageScrolled(int
position, float positionOffset,
int positionOffsetPixels) {
}
@Override
public void
onPageSelected(int
position) {
radioButtons.get(position).setChecked(true);
}
@Override
public void
onPageScrollStateChanged(int
state) {
}
});
}
private void initData() {
list =
new ArrayList<>();
ChatFragment chatFragment = new
ChatFragment();
FriendFragment friendFragment = new
FriendFragment();
FindFragment findFragment = new
FindFragment();
HomeFragment homeFragment = new
HomeFragment();
list.add(chatFragment);
list.add(friendFragment);
list.add(findFragment);
list.add(homeFragment);
radioButtons =
new ArrayList<>();
RadioGroup radioGroup = (RadioGroup) findViewById(R.id.rg);
//getChildCount()获得父容器中子控件的个数
for
(int i =
0; i < radioGroup.getChildCount(); i++) {
RadioButton radioButton = (RadioButton) radioGroup.getChildAt(i);
radioButtons.add(radioButton);
}
radioGroup.setOnCheckedChangeListener(new
RadioGroup.OnCheckedChangeListener() {
@Override
public void
onCheckedChanged(RadioGroup group, int
checkedId) {
switch (checkedId) {
case R.id.chat:
viewPager.setCurrentItem(0);
break;
case R.id.friend:
viewPager.setCurrentItem(1);
break;
case R.id.find:
viewPager.setCurrentItem(2);
break;
case R.id.home:
viewPager.setCurrentItem(3);
break;
}
}
});
}
}
三、TabLayout+ViewPager+Fragment
采用Android5.0中新技术material design中的TabLayout来快速实现导航栏效果(注意不是TableLayout)。(一) .TabLayout属性简介
1. app:tabMode="scrollable"设置导航栏是否为滚动模式2. tabLayout.setupWithViewPager(viewPager);将TabLayout和ViewPager绑定到一起。
(二).布局文件代码:
<?xml version="1.0"encoding="utf-8"?>
<RelativeLayout
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"
tools:context="org.mobiletrain.navigation4.MainActivity">
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="48dp"
app:tabMode="scrollable"></android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/vp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/tab_layout"></android.support.v4.view.ViewPager>
</RelativeLayout>
(三).Activity核心代码:
public class MainActivityextends AppCompatActivity {
private String[]
titles;
private List<Fragment>
fragments;
@Override
protected void
onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initData();
initView();
}
private void initView() {
ViewPager viewPager = (ViewPager) findViewById(R.id.vp);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
MyAdapter adapter = new
MyAdapter(getSupportFragmentManager(), fragments,
titles);
viewPager.setAdapter(adapter);
tabLayout.setupWithViewPager(viewPager);
}
private void initData() {
titles =
new String[]{"聊天",
"好友", "发现",
"我","123","456","789"};
fragments =
new ArrayList<>();
for (int
i = 0; i < titles.length; i++) {
Fragment fragment = BaseFragment.getInstance("123---"
+ titles[i]);
fragments.add(fragment);
}
}
}
相关文章推荐
- 【幻化万千戏红尘】qianfeng-Android-Day02-RelativeLayout布局、TextView、EditText、imageView基础学习
- 【幻化万千戏红尘】qianfeng-Android-Day07-AsyncTask基础学习:
- 【幻化万千戏红尘】qianfeng-Android-Day03-RadioButton及RadioGroup的用法、CheckBox、ProgressBar基础学习:
- 【幻化万千戏红尘】qianfeng-Android-Day13_SQLiteOpenHelper
- 【幻化万千戏红尘】qianfeng-Android-Day12SharedPreference、内部存储、外部存储
- 【幻化万千戏红尘】qianfeng-Android-Day05-Activity生命周期,Actitity的启动模式基础学习:
- 【幻化万千戏红尘】qianfeng-Android-Day17_ViewPager
- 【幻化万千戏红尘】qianfeng-Android-Day20_Bitmap二次采样
- 【幻化万千戏红尘】qianfeng-Android-Day01-安卓历史及环境的搭建基础学习:
- 【幻化万千戏红尘】qianfeng-Android-Day06-Intent七大属性基础学习:
- 【幻化万千戏红尘】qianfeng-Android-Day20_LruCache
- 【幻化万千戏红尘】qianfeng-Android-Day18_Fragment
- 【幻化万千戏红尘】qianfeng-Android-Day16动画
- 【幻化万千戏红尘】qianfeng-Android-Day20_Handler_Looper_MessageQueue
- 【幻化万千戏红尘】qianfeng-Android-Day08-基础学习:ListView
- 【幻化万千戏红尘】qianfeng-Android-Day04-Spinner、ScrollVie、AutoCompleteTextView,Activity初步认识基础学习:
- 【幻化万千戏红尘】qianfeng-Android-Day01-历史、环境搭建、VIEW属性、LinearLayout详解基础学习
- 【幻化万千戏红尘】qianfeng-Android-Day11_Menu、ContextMenu、Dialog、PopupWindow
- 【幻化万千戏红尘】qianfeng-Android-Day13_SQLiteDataBases
- 【幻化万千戏红尘】qianfeng-JAVA课程结束总结