写作目的:练练手,加深印象,能帮助到其他人当然最好(顶多入门的吧)
实现思路:1,通过点击radiobutton实现fragment的替换,在viewpage中装有fragment。点击哪个就显示对应的fragment。
具体实现:
一,先看效果,界面很简陋哈。
二,mainActivity布局:很简单,一个radiogroup+3个radiobutton+viewpager
布局代码:
<?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:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.nick.navigationdemo.MainActivity">
<RadioGroup
android:id="@+id/rg_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal"
android:layout_alignParentBottom="true">
<RadioButton
android:id="@+id/btn_home"
android:layout_height="wrap_content"
android:text="首页"
android:textSize="20dp"
android:checked="true"
style="@style/btn_navigation"
/>
<RadioButton
android:id="@+id/btn_near"
android:layout_height="wrap_content"
style="@style/btn_navigation"
android:text="附近"
/>
<RadioButton
android:id="@+id/btn_my"
style="@style/btn_navigation"
android:gravity="center"
android:layout_height="wrap_content"
android:text="个人中心"
/>
</RadioGroup>
<android.support.v4.view.ViewPager
android:id="@+id/vp_navigation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/rg_navigation"></android.support.v4.view.ViewPager>
</RelativeLayout>
style代码:
<style name="btn_navigation">
<item name="android:button">@null</item>
<item name="android:layout_width">0dp</item>
<item name="android:layout_weight">1</item>
<item name="android:textSize">20dp</item>
<item name="android:background">@drawable/bg_btn_navigation</item>
<item name="android:gravity">center</item>
</style>
接下来看mainActivity代码,没什么难点。
//底部导航
public class MainActivity extends AppCompatActivity {
RadioGroup rg_navigation;
RadioButton btn_home;
RadioButton btn_near;
RadioButton btn_my;
ViewPager vp_navigation;
List<Fragment> fragmentList;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);//注解工具
initView();
processLogic();
}
//初始化view 找控件
public void initView(){
rg_navigation= (RadioGroup) findViewById(R.id.rg_navigation);
btn_home= (RadioButton) findViewById(R.id.btn_home);
btn_near= (RadioButton) findViewById(R.id.btn_near);
btn_my= (RadioButton) findViewById(R.id.btn_my);
vp_navigation= (ViewPager) findViewById(R.id.vp_navigation);
fragmentList=new ArrayList<>();
}
//数据,逻辑处理
public void processLogic(){
fragmentList.add(HomeFragment.newInstance("首页"));
fragmentList.add(NearFragment.newInstance("附近"));
fragmentList.add(MyFragment.newInstance("个人中心"));
vp_navigation.setAdapter(new myAdapter(getSupportFragmentManager(),fragmentList));//通过适配器与fragment关联
}
//根据点击的button显示相应的fragment
@OnClick({R.id.btn_home,R.id.btn_near,R.id.btn_my})
public void onClick(View view){
switch (view.getId()){
case R.id.btn_home:
vp_navigation.setCurrentItem(0);
break;
case R.id.btn_near:
vp_navigation.setCurrentItem(1);
break;
case R.id.btn_my:
vp_navigation.setCurrentItem(2);
break;
}
}
}
适配器:
public class myAdapter extends FragmentPagerAdapter {
List<Fragment> fragments;
public myAdapter(FragmentManager fm, List<Fragment> fragments) {
super(fm);
this.fragments=fragments;
}
@Override
public Fragment getItem(int position) {
return fragments.get(position);
}
@Override
public int getCount() {
return fragments.size();
}
}
fragment代码,这边有3个fragment。代码都一样,就一个textview
public class HomeFragment extends Fragment {
TextView textView;
public static Fragment newInstance(String content){
//这边可以直接用构造函数传值----我这里用的是官方建议的传值方式
Bundle bundle=new Bundle();
bundle.putString("内容",content);
HomeFragment fragment=new HomeFragment();
fragment.setArguments(bundle);
return fragment;
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view=inflater.inflate(R.layout.fragment_public,null);
textView= (TextView) view.findViewById(R.id.tv_content);
return view;
}
@Override
public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
initView();
}
public void initView(){
String content=getArguments().getString("内容");
textView.setText(content);
}
}
fragment布局也贴下吧
<!--fragment的共用布局-->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
xmlns:tools="http://schemas.android.com/tools"
android:layout_height="match_parent">
<TextView
android:id="@+id/tv_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="50dp"
tools:text="第一个"/>
</LinearLayout>
到这就没了,很简单,这边viewpager是可以滑动的,一般app首页的都不会滑动切换,这边自定义个viewpager就好了,禁止它滑动。
源码传送门