一个大型新闻app的骨架（android）-CSDN博客

前端做着太枯燥了，最近使劲折腾android,又因为曾经待过一家公司是做新闻app的，所以对新闻类app特别执着。折腾reactnative,flutter,android时，UI都是模仿这种新闻类。

先来看一下效果

看这效果，顺便参考了掘金的结构。

来看一下实现思路

先做沉侵式处理

 <item name="android:windowTranslucentStatus">true</item>
复制代码

底部导航是用官方的组件BottomNavigationView

 <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="0dp"
        android:layout_marginStart="0dp"
        android:background="?android:attr/windowBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/navigation" />

复制代码

这个比较简单，构建项目的时候，选择BottomNavigationView就行了，简单的操作。。。

BottomNavigationView的第一个fragment，有一个顶部tab导航栏，实现方案为TabLayout+ViewPager+Fragment

<android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="65dp"
        android:paddingTop="10dp"
        android:background="#fa1515"
        app:tabIndicatorColor="#66ff33"
        app:tabIndicatorHeight="2dp"
        app:tabTextColor="#f0b4b4"
        app:tabSelectedTextColor="#ffffff"
        app:tabMode="scrollable"
        app:tabTextAppearance="@style/TabLayoutStyle"
        />


    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:layout_weight="1"/>
复制代码

这里会出现fragment嵌套fragment，为了避免出现滑动冲突，重写ViewPager

public class NoScrollViewPager extends ViewPager {
    public NoScrollViewPager(Context context) {
        super(context);
    }
    public NoScrollViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        return false;
    }
    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        return false;
    }

}

复制代码

然后layout中

<com.htyy.yutao.myapplication1.NoScrollViewPager
        android:id="@+id/main_viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="9" />
复制代码

因为是自定义顶部导航栏，所以把ActionBar隐藏，并且自定义导航栏时注意下高度和padding-top

getSupportActionBar().hide();//隐藏掉整个ActionBar
复制代码

android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:scrollbars="none"
复制代码

activity的跳转就简单了，就是一个简单的intent

 Intent intent =new Intent(getActivity(),Main3Activity.class);
                startActivity(intent);
复制代码

另一个新的activty用的是官方的侧滑DrawerLayout控件，在项目内新建一个DrawerLayout的activty就行了。

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">
    <ImageView
        android:id="@+id/img_show"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1" />
    <include
        layout="@layout/app_bar_main3"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main3"
        app:menu="@menu/activity_main3_drawer" />

</android.support.v4.widget.DrawerLayout>
复制代码