练习项目 一款新闻app的开发 （二） ： 新闻首页开发（整体UI架构）

下面主要整理下关于新闻首页的开发，最终效果图如下

本节主要先说下关于标题顶部栏和导航栏的UI处理，主要用到知识点有： 

  1.CoordinatorLayout : 

        用来协调子view. 具体详细描述，可以参照这篇博客： CoordinatorLayout的使用如此简单

  2.ToolBar:   

        Toolbar 使用来替代原来的ActionBar。一个Toolbar 从左到右包括了 一个navigation button、一个logo、一个title和subtitle、一个或多个自定义的View和一个 action menu 这5部分。也就是这个ViewGroup 容器里面包含了这五部分内容

  3.AppBarLayout:

       AppbarLayout继承自LinearLayout,它就是一个垂直方向的LinearLayout,在LinearLayout的基础上添加了滑动手势。它可以让你定制在某个可滑动的View（如：ScrollView ,ListView ,RecyclerView 等）滑动手势发生改变时，内部的子View 该做什么动作.

       内部的子View通过在布局中加app:layout_scrollFlags设置执行的动作。

通过CoordinatorLayout +AppBarLayout+ToolBar，就可以实现一个可根据滑动view进行滑动的顶部栏。具体详细描述，可以参照这篇博客  玩转AppBarLayout，更酷炫的顶部栏。

      上面主要整理了一些项目中顶部栏所用到的一些控件，接下来说下导航栏的处理。导航栏主要是通过TabLayout+ViewPager+Fragment来实现。

 关于TabLayout的相关详细介绍，可以参照这篇博客  Design库-TabLayout属性详解

下面列下一些核心代码：

   1.布局文件：

      

 2.相关java代码：

    

package com.jkxy.leijx.app_myfirstproject.module.Activity;

import android.content.Context;
import android.content.res.Configuration;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.design.widget.TabLayout;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;

import com.jkxy.leijx.app_myfirstproject.R;
import com.jkxy.leijx.app_myfirstproject.module.Fragment.NewsFragment;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by leijx on 2017/9/15.
 */

public class HomepageActivity extends AppCompatActivity {

    private Toolbar toolbar;
    private DrawerLayout drawerlayout;
    private ActionBarDrawerToggle mActionBarDrawerToggle;
    private TabLayout tablayout;
    private ViewPager viewpager;
    NewsFragment fragment;

    private Context context = HomepageActivity.this;
    private String[] list = {"头条","科技","财经","军事","体育"};
    private List fragmentList = new ArrayList();

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_homepage_layout);
        initfragments();
        initview();
    }

    /**
     * 初始化fragments列表
     */
    private void initfragments() {
        for(int i=0;i<5;i++){
            NewsFragment newsFragment = new NewsFragment();
            Bundle bundle = new Bundle();
            bundle.putInt("index", i);
            newsFragment.setArguments(bundle);
            fragmentList.add(newsFragment);
        }


    }

    private void initview() {
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        drawerlayout = (DrawerLayout) findViewById(R.id.drawerlayout);
        tablayout = (TabLayout) findViewById(R.id.tablayout);
        viewpager = (ViewPager) findViewById(R.id.viewpager);

        toolbar.setNavigationIcon(R.drawable.ic_menu_white_24dp);  //设置navigation button
        toolbar.setTitle("");                                      //设置标题
        setSupportActionBar(toolbar);                              //使用toolbar来替代系统自带的actionbar控件
        mActionBarDrawerToggle = new ActionBarDrawerToggle(this,drawerlayout,toolbar,
                R.string.opne_drawer,R.string.close_drawer){
            @Override
            public void onDrawerOpened(View drawerView) {
//                invalidateOptionsMenu();

            }
            @Override
            public void onDrawerClosed(View drawerView) {
//                invalidateOptionsMenu();
            }
        };
        mActionBarDrawerToggle.syncState();

//        tablayout.addTab(tablayout.newTab().setText(list[0]));
//        tablayout.addTab(tablayout.newTab().setText(list[1]));
//        tablayout.addTab(tablayout.newTab().setText(list[2]));
//        tablayout.addTab(tablayout.newTab().setText(list[3]));
//        tablayout.addTab(tablayout.newTab().setText(list[4]));
        tablayout.setupWithViewPager(viewpager);   //设置与viewpage联动  此处注意，设置后，会导致之前设置的Tab被清除
        tablayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                Toast.makeText(context,tab.getText()+"被点击了",Toast.LENGTH_LONG).show();
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
        viewpager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public NewsFragment getItem(int position) {
                return fragmentList.get(position);
            }

            @Override
            public int getCount() {
                return fragmentList.size();
            }

            //通过重写getPageTitle方法来设置TabLayout的相关Tab
            @Override
            public CharSequence getPageTitle(int position) {
                return list[position];
            }
        });
    }

    @Override
    protected void onPause() {
        super.onPause();
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if(mActionBarDrawerToggle.onOptionsItemSelected(item)){
            return true;
        }
        return super.onOptionsItemSelected(item);
    }


    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        // Pass any configuration change to the drawer toggls
        mActionBarDrawerToggle.onConfigurationChanged(newConfig);
    }

}