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

起始页+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{
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_splash);
        Thread myThread=new Thread(){//创建子线程
            @Override
            public void run() {
                try{
                    sleep(3000);//使程序休眠3秒
                    Intent it=new Intent(getApplicationContext(),MainActivity.class);//启动MainActivity
                    startActivity(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">

    <ImageView
        android: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文件就要改一下：

<activity
    android: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;
    @Override
    protected 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张全部
    }

    @Override
    public 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页面切换的处理方法
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    }

    @Override
    public void onPageSelected(int position) {
    }

    @Override
    public 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">


    <RelativeLayout
        android:id="@+id/ly_top_bar"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="@color/bg_topbar">

        <TextView
            android: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" />


        <View
            android:layout_width="match_parent"
            android:layout_height="2px"
            android:layout_alignParentBottom="true"
            android:background="@color/div_white" />

    </RelativeLayout>


    <RadioGroup
        android: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">

        <RadioButton
            android:id="@+id/rb_data"
            style="@style/tab_menu_item"
            android:drawableTop="@drawable/tab_menu_data"
            android:text="@string/tab_menu_sleep" />

        <RadioButton
            android:id="@+id/rb_manage"
            style="@style/tab_menu_item"
            android:drawableTop="@drawable/tab_menu_manage"
            android:text="@string/tab_menu_heart" />

        <RadioButton
            android:id="@+id/rb_device"
            style="@style/tab_menu_item"
            android:drawableTop="@drawable/tab_menu_device"
            android:text="@string/tab_menu_device" />

        <RadioButton
            android:id="@+id/rb_mine"
            style="@style/tab_menu_item"
            android:drawableTop="@drawable/tab_menu_mine"
            android:text="@string/tab_menu_mine"/>

    </RadioGroup>

    <View
        android: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.ViewPager
        android: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();
    }


    @Override
    public int getCount() {
        return PAGER_COUNT;
    }

    @Override
    public Object instantiateItem(ViewGroup vg, int position) {
        return super.instantiateItem(vg, position);
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        super.destroyItem(container, position, object);
    }

    @Override
    public 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;
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fg_data,null);
        return view;
    }
    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);

        stry=(com.example.asus.huadong.CircleImageView) getActivity().findViewById(R.id.stry);
        stry.setOnClickListener(new View.OnClickListener() {
            @Override
            public 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() {
            @Override
            public 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、图片没给，其他主要的都有了，按照自己的想法设计吧，毕竟我的界面哈哈
如果有啥写错了或者可以改进的代码还请各位大佬指点一下吧，谢谢大家

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

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