練習項目 一款新聞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.佈局文件：

      

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!--AppBarLayout
        內部的子View通過在佈局中加app:layout_scrollFlags設置執行的動作
        具體的值有：1.scroll —— 值設置爲scroll的view會根據對應的滾動事件一起滾動
        2.enterAlways —— 值設爲enterAlways的View,當對應滾動視圖往下滾動時，該View會直接往下滾動。而不用考慮對應滾動視圖是否在滾動
        3.exitUntilCollapsed：—— 值設爲exitUntilCollapsed的View，當這個View要往上逐漸“消逝”時，
          會一直往上滑動，直到剩下的的高度達到它的最小高度後，再響應對應滾動視圖的內部滑動事件
        4.enterAlwaysCollapsed：是enterAlways的附加選項，一般跟enterAlways一起使用，它是指，View在往下“出現”的時候，首先是enterAlways效果，當View的高度達到最小高度時，
          View就暫時不去往下滾動，直到對應滾動視圖滑動到頂部不再滑動時，View再繼續往下滑動，直到滑到View的頂部結束
       -->

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways"
            >
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="新聞"
                android:textColor="@color/white"
                android:textSize="22sp"/>

        </android.support.v7.widget.Toolbar>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            >
            <!--TabLayout中一些屬性的說明
                 app:tabTextColor         ：設置未選中字體的顏色
                 app:tabSelectedTextColor ：設置選中字體的顏色
                 app:tabIndicatorColor    ：設置指示器下標的顏色
                 app:tabBackground        ：設置整個TabLayout的顏色
                 app:tabIndicatorHeight   ：設置指示器下標的寬度-->
            <android.support.design.widget.TabLayout
                android:id="@+id/tablayout"
                android:layout_width="0dp"
                android:layout_height="40dp"
                app:tabTextColor="@color/alpha_50_white"
                app:tabSelectedTextColor="@color/white"
                app:tabMode="scrollable"
                android:layout_weight="1">
            </android.support.design.widget.TabLayout>

            <ImageView
                android:id="@+id/addimg"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:background="@drawable/ic_add_white_18dp"

                />

        </LinearLayout>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

    </android.support.v4.view.ViewPager>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/floatingButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_arrow_upward"
        android:layout_gravity="bottom|right"
        android:layout_margin="16dp"
        />

</android.support.design.widget.CoordinatorLayout>

 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<NewsFragment> fragmentList = new ArrayList<NewsFragment>();

    @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);
    }

}