练习项目 一款新闻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);
}

}