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

}

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

猜你喜欢

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