起始页+fragment底部导航栏+ViewPager滑动切换+个人信息界面示例安卓app

先上效果图~

参考了网上一些大佬的代码和界面，我自学并总结了一下，简单地做了一个安卓app的一个基本界面，基于Android studio，包含起始页(gif图里没显示)，主界面里有底部导航栏，可通过左右滑动进行页面切换，最后一个是个人信息界面的基本框架。

这里先感谢写Android菜鸟教程的那位大哥，在他的教程里我学到了很多东西，我把这篇写下来，一来想写个笔记，二来希望能和大家一起交流学习，如有错误，还请多多指教~

=============================

起始页

package com.example.asus.huadong;import android.app.Activity;import android.content.Intent;import android.os.Bundle;public class Splash extends Activity{@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_splash);Thread myThread=new Thread(){//创建子线程@Overridepublic void run() {try{sleep(3000);//使程序休眠3秒Intent it=new Intent(getApplicationContext(),MainActivity.class);//启动MainActivitystartActivity(it);finish();//关闭当前活动}catch (Exception e){e.printStackTrace();}}};myThread.start();//启动线程}}

起始页的布局文件

<?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\"><ImageViewandroid:layout_width=\"fill_parent\"android:layout_height=\"fill_parent\"android:id=\"@+id/startView\"//id自己取名android:layout_gravity=\"center_horizontal\"android:background=\"@mipmap/mystart\" />//这个是图片哦，自己找一张图片放在mipmap里，名字一样就ok</LinearLayout>

如果要用起始页，那么manifest文件就要改一下：

<activityandroid:name=\".Splash\"<intent-filter><action android:name=\"android.intent.action.MAIN\" /><category android:name=\"android.intent.category.LAUNCHER\" /></intent-filter></activity>

如果不用起始页的话就直接忽略上面，下面开始导航栏和滑动切换

注：滑动切换界面要用v4包

MainActivity.java

package com.example.asus.huadong;//注意！这里是你自己的包import android.os.Bundle;import android.support.v4.app.FragmentActivity;import android.support.v4.view.ViewPager;import android.widget.RadioButton;import android.widget.RadioGroup;import android.widget.TextView;public class MainActivity extends FragmentActivity implements RadioGroup.OnCheckedChangeListener,ViewPager.OnPageChangeListener {private RadioGroup rg_tab_bar;private RadioButton rb_manage;private RadioButton rb_mine;private RadioButton rb_device;private RadioButton rb_data;private TextView topbar;private ViewPager vpager;private MyFragmentPagerAdapter mAdapter;//几个代表页面的常量public static final int PAGE_ONE = 0;public static final int PAGE_TWO = 1;public static final int PAGE_THREE = 2;public static final int PAGE_FOUR = 3;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager());bindViews();rb_data.setChecked(true);}private void bindViews() {rg_tab_bar = (RadioGroup) findViewById(R.id.rg_tab_bar);rb_data = (RadioButton) findViewById(R.id.rb_data);rb_manage = (RadioButton) findViewById(R.id.rb_manage);rb_device = (RadioButton) findViewById(R.id.rb_device);rb_mine = (RadioButton) findViewById(R.id.rb_mine);rg_tab_bar.setOnCheckedChangeListener(this);vpager = (ViewPager) findViewById(R.id.vpager);vpager.setAdapter(mAdapter);vpager.setCurrentItem(0);vpager.setOnPageChangeListener(this);vpager.setOffscreenPageLimit(2);//滑动预存几页，我是4张全部}@Overridepublic void onCheckedChanged(RadioGroup group, int checkedId) {topbar = (TextView)findViewById(R.id.txt_topbar);switch (checkedId) {case R.id.rb_data:vpager.setCurrentItem(PAGE_ONE);topbar.setText( \"数据\");break;case R.id.rb_manage:vpager.setCurrentItem(PAGE_TWO);topbar.setText( \"管理\");break;case R.id.rb_device:vpager.setCurrentItem(PAGE_THREE);topbar.setText( \"设备\");break;case R.id.rb_mine:vpager.setCurrentItem(PAGE_FOUR);topbar.setText( \"我的\");// Intent intent = new Intent(MainActivity.this, MySpActivity.class);//startActivity(intent);break;}}//重写ViewPager页面切换的处理方法@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}@Overridepublic void onPageSelected(int position) {}@Overridepublic void onPageScrollStateChanged(int state) {//state的状态有三个，0表示什么都没做，1正在滑动，2滑动完毕if (state == 2) {switch (vpager.getCurrentItem()) {case PAGE_ONE:rb_data.setChecked(true);break;case PAGE_TWO:rb_manage.setChecked(true);break;case PAGE_THREE:rb_device.setChecked(true);break;case PAGE_FOUR:rb_mine.setChecked(true);break;}}}}

activity_main.xml

这是布局界面，底部导航栏用了radiogroup，这里引用到一些styles/color等

<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\"android:background=\"@color/bg_gray\"tools:context=\".MainActivity\"><RelativeLayoutandroid:id=\"@+id/ly_top_bar\"android:layout_width=\"match_parent\"android:layout_height=\"48dp\"android:background=\"@color/bg_topbar\"><TextViewandroid:id=\"@+id/txt_topbar\"android:layout_width=\"match_parent\"android:layout_height=\"match_parent\"android:layout_centerInParent=\"true\"android:gravity=\"center\"android:text=\"数据\"android:textColor=\"@color/text_topbar\"android:textSize=\"18sp\" /><Viewandroid:layout_width=\"match_parent\"android:layout_height=\"2px\"android:layout_alignParentBottom=\"true\"android:background=\"@color/div_white\" /></RelativeLayout><RadioGroupandroid:id=\"@+id/rg_tab_bar\"android:layout_width=\"match_parent\"android:layout_height=\"56dp\"android:layout_alignParentBottom=\"true\"android:background=\"@color/bg_white\"android:orientation=\"horizontal\"><RadioButtonandroid:id=\"@+id/rb_data\"style=\"@style/tab_menu_item\"android:drawableTop=\"@drawable/tab_menu_data\"android:text=\"@string/tab_menu_sleep\" /><RadioButtonandroid:id=\"@+id/rb_manage\"style=\"@style/tab_menu_item\"android:drawableTop=\"@drawable/tab_menu_manage\"android:text=\"@string/tab_menu_heart\" /><RadioButtonandroid:id=\"@+id/rb_device\"style=\"@style/tab_menu_item\"android:drawableTop=\"@drawable/tab_menu_device\"android:text=\"@string/tab_menu_device\" /><RadioButtonandroid:id=\"@+id/rb_mine\"style=\"@style/tab_menu_item\"android:drawableTop=\"@drawable/tab_menu_mine\"android:text=\"@string/tab_menu_mine\"/></RadioGroup><Viewandroid:id=\"@+id/div_tab_bar\"android:layout_width=\"match_parent\"android:layout_height=\"2px\"android:layout_above=\"@id/rg_tab_bar\"android:background=\"@color/div_white\" /><android.support.v4.view.ViewPagerandroid:id=\"@+id/vpager\"android:layout_width=\"match_parent\"android:layout_height=\"match_parent\"android:layout_above=\"@id/div_tab_bar\"android:layout_below=\"@id/ly_top_bar\" /></RelativeLayout>

MyFragmentPagerAdapter.java

package com.example.asus.huadong;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import android.view.ViewGroup;public class MyFragmentPagerAdapter extends FragmentPagerAdapter {private final int PAGER_COUNT = 4;private MyTwo myFragment1 = null;//自己的fragment名称private MyFragment myFragment2 = null;private MyDevice myFragment3 = null;private MyInfo myFragment4 = null;public MyFragmentPagerAdapter(FragmentManager fm) {super(fm);myFragment1 = new MyTwo();myFragment2 = new MyFragment();myFragment3 = new MyDevice();myFragment4 = new MyInfo();}@Overridepublic int getCount() {return PAGER_COUNT;}@Overridepublic Object instantiateItem(ViewGroup vg, int position) {return super.instantiateItem(vg, position);}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {super.destroyItem(container, position, object);}@Overridepublic Fragment getItem(int position) {Fragment fragment = null;switch (position) {case MainActivity.PAGE_ONE:fragment = myFragment1;break;case MainActivity.PAGE_TWO:fragment = myFragment2;break;case MainActivity.PAGE_THREE:fragment = myFragment3;break;case MainActivity.PAGE_FOUR:fragment = myFragment4;break;}return fragment;}}

drawable文件

tab_menu_bg.xml

<?xml version=\"1.0\" encoding=\"utf-8\"?><selector xmlns:android=\"http://schemas.android.com/apk/res/android\"><item android:state_checked=\"true\"><shape><solid android:color=\"#FFC4C4C4\" /></shape></item><item><shape><solid android:color=\"@color/transparent\" /></shape></item></selector>

tab_menu_data.xml

<?xml version=\"1.0\" encoding=\"utf-8\"?><selector xmlns:android=\"http://schemas.android.com/apk/res/android\"><item android:drawable=\"@mipmap/tab_data_pressed\" android:state_checked=\"true\" /><item android:drawable=\"@mipmap/tab_data_normal\" /></selector>

这些drawable文件都差不多，看主界面的布局文件，我的每个fragment有对应的drawable，主要是按下和没按下的图片不一样等等，mipmap图片我就不给了，大家自己随便弄图片上去，然后改下图片名称就ok

设置text的drawable，按下和没按下的颜色不一样

<?xml version=\"1.0\" encoding=\"utf-8\"?><selector xmlns:android=\"http://schemas.android.com/apk/res/android\"><item android:color=\"@color/text_white\" android:state_checked=\"true\" /><item android:color=\"@color/text_gray\" /></selector>

最上面那个栏，可以按照自己的设计修改大小参数

<?xml version=\"1.0\" encoding=\"utf-8\"?><shape xmlns:android=\"http://schemas.android.com/apk/res/android\" android:shape=\"rectangle\" ><stroke android:width=\"1dip\" android:color=\"#dcdbdb\"/></shape>

像color/strings/styles这些文件的代码比较简单，按照自己的个人喜好去选择颜色或文字、样式即可，这里就先不贴出来啦，不过如果上面有引用的，一定要自己写一下，不然会出错，然后有问题欢迎找我交流~

下面贴一下fragment界面吧

MyTwo.java

这是我自己随便编的一个fragment界面，为了方便跳转activity，给出以下例子，当然，如果只是学习滑动，也可以自己随便弄一个空界面。
布局代码没给，这个很简单，随便整一个空白的，弄俩字就行，或者看你自己丰富界面~

package com.example.asus.huadong;import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;public class MyTwo extends Fragment{private com.example.asus.huadong.CircleImageView stry;private com.example.asus.huadong.CircleImageView dtry;@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {View view = inflater.inflate(R.layout.fg_data,null);return view;}@Overridepublic void onActivityCreated(Bundle savedInstanceState) {super.onActivityCreated(savedInstanceState);stry=(com.example.asus.huadong.CircleImageView) getActivity().findViewById(R.id.stry);stry.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {//Intent intent = new Intent();//intent.setClass(getActivity(), 要跳转的界面.class);//startActivity(intent);}});dtry=(com.example.asus.huadong.CircleImageView) getActivity().findViewById(R.id.dtry);dtry.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {//Intent intent = new Intent();//intent.setClass(getActivity(), 要跳转的界面.class);//startActivity(intent);}});}}

注意
如果要跳转activity，按返回键退回mainactivity，记得再manifest里添加以下代码：

<activity android:name=\".YourActivity\"//这里是要跳转的activity名称android:screenOrientation=\"portrait\"//保持竖屏，此行自行选择是否需要android:parentActivityName=\".MainActivity\"></activity>//有几个activity写几个

其他的三个fragment类似，我第三个界面是做的蓝牙连接，等有空再整理笔记。
代码有点乱，哈哈我太菜了
下篇再写个人信息界面的框架吧~

我这个自己运行是ok的，除了一些类似的fragment界面和drawable文件以及color/strings/styles、图片没给，其他主要的都有了，按照自己的想法设计吧，毕竟我的界面哈哈
如果有啥写错了或者可以改进的代码还请各位大佬指点一下吧，谢谢大家

个人信息界面那个我下篇再整理出来吧~

希望我的学习笔记能帮到大家！加油