1-1 课程介绍—功能技术点和课程安排

---

主要功能 主要技术点

1-3 准备工作—项目架构部署

---

创建相应包结构

创建相应包结构
相关类，先创建放着，后面会去实现它

创建相应类

做一些初始化，比如头文件注释，打开settings，搜索code，如图

BaseApplication（位于application）

public class BaseApplication extends Application {
    //创建
    @Override
    public void onCreate() {
        super.onCreate();
    }

创建完BaseApplication后，需要在清单文件AndroidManifest.xml中生命application

    <application
        android:name=".application.BaseApplication"
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        ....省略
</application>

BaseApplication（位于ui）

这个类是用来设置一些公共的属性。

显示返回箭头

/**
 * 主要做得事情
 * 1.统一的属性
 * 2.统一的接口
 * 3.统一的方法
 */
public class BaseActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getSupportActionBar().setElevation(0);
        //显示返回键
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);


    }
    //菜单栏操作
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home://android自带的id
                finish();//finish（）就是直接返回了
                break;
        }
        return super.onOptionsItemSelected(item);
    }
}

drawable

如上图包结构创建相应drawable

values

如上图创建values-zh，values-en，用来做国际化

StaticClass,UtilTools

存放常量，常用工具类，现在我们创建了，先为空，以后用到再去写

1-4 首页框架—TabLayout布局搭建

---

TabLayout简介 演示

//在build.gradle添加tablayout依赖
compile 'com.android.support:design:24.2.0'

TabLayout属性详解:http://www.jianshu.com/p/2b2bb6be83a8

activity_main.xml

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <android.support.design.widget.TabLayout
            android:id="@+id/mTablayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            app:tabGravity="fill"
            app:tabIndicatorColor="@color/colorAccent"
            app:tabMode="fixed"
            app:tabSelectedTextColor="@color/colorAccent"
            app:tabTextColor="@android:color/white"

            />

        <android.support.v4.view.ViewPager
            android:id="@+id/mViewPager"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />
    </LinearLayout>

    <android.support.design.widget.FloatingActionButton
        android:src="@drawable/icon_setting"

        android:layout_marginRight="15dp"
        android:layout_marginBottom="15dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:id="@+id/fab_setting"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

     />
</RelativeLayout>

一共四个fragment，我们这里就不贴代码了，直接放到github吧，刚开始只有一个textview作为测试，这里代码，我直接贴后面需要的控件，大家可以直接写个textview放着先。

ButlerFragment

//导包import android.support.v4.app.Fragment;可以向下兼容
public class ButlerFragment extends Fragment implements View.OnClickListener {
@Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_butler, null);
        findView(view);
        return view;
    }
}

GirlFragement，UserFragement，WecharFragement这其他三个Fragment也都是如此，创建好这样放着。

MainActivity.java

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    //TabLayout
    private TabLayout mTabLayout;
    //ViewPager
    private ViewPager mViewPager;
    //Title
    private List<String> mTitle;
    //Fragment  一样也是V4包
    private List<Fragment> mFragment;
  @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //去掉阴影
        getSupportActionBar().setElevation(0);

        initData();
        initView();

    }

    //初始化数据
    private void initData() {
        mTitle = new ArrayList<>();
        mTitle.add(getString(R.string.text_butler_service));
        mTitle.add(getString(R.string.text_wechat));
        mTitle.add(getString(R.string.text_girl));
        mTitle.add(getString(R.string.text_user_info));

        mFragment = new ArrayList<>();
        mFragment.add(new ButlerFragment());
        mFragment.add(new WechatFragment());
        mFragment.add(new GirlFragment());
        mFragment.add(new UserFragment());
    }

    //初始化View
    private void initView() {
  mTabLayout = (TabLayout) findViewById(R.id.mTabLayout);
        mViewPager = (ViewPager) findViewById(R.id.mViewPager);
        //预加载
        mViewPager.setOffscreenPageLimit(mFragment.size());
 //设置适配器
        mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            //选中的item
            @Override
            public Fragment getItem(int position) {
                return mFragment.get(position);
            }

            //返回item的个数
            @Override
            public int getCount() {
                return mFragment.size();
            }

            //设置标题
            @Override
            public CharSequence getPageTitle(int position) {
                return mTitle.get(position);
            }
        });
 //绑定
        mTabLayout.setupWithViewPager(mViewPager);
    }

我们绑定好了就可以运行了

运行效果图

1-5 首页框架—TabLayout逻辑实现

---

我们现在要实现悬浮按钮的逻辑

第一页不显示悬浮按钮 其他页面显示悬浮按钮

在上面activity_main.xml中已经加入了FloatingActionButton，所以我们直接来看逻辑的实现。
在MainActivity.java的initView方法中加入如下代码

 fab_setting = (FloatingActionButton) findViewById(R.id.fab_setting);
        fab_setting.setOnClickListener(this);
        fab_setting.setVisibility(View.GONE);//按钮默认是隐藏的

在第一个页面不显示按钮，其他页面显示，在initView加入

 //mViewPager滑动监听
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }
            @Override
            public void onPageSelected(int position) {
                Log.i("TAG", "position:" + position);
                if (position == 0) {
                    fab_setting.setVisibility(View.GONE);
                } else {
                    fab_setting.setVisibility(View.VISIBLE);
                }
            }
            @Override
            public void onPageScrollStateChanged(int state) {
            }
        });

当我们点击这个悬浮按钮就会进入到设置页面

设置页面

这是我们的点击事件的监听

@Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.fab_setting:
                startActivity(new Intent(this, SettingActivity.class));
                break;
        }
    }

SettingActivity.java现在也是空实现

public class SettingActivity extends BaseActivity{

    @Override
    public void onCreate(Bundle savedInstanceState, PersistableBundle persistentState) {
        super.onCreate(savedInstanceState, persistentState);
        setContentView(R.layout.activity_setting);
    }
}

记得SettingActivity是一个Activity，要在AndroidManifest.xml中声明

   <!--设置-->
        <activity
            android:name=".ui.SettingActivity"
            android:label="@string/text_setting" />

到此已经完成了框架的搭建~