前端做著太枯燥了尊残,最近使勁折騰android,又因為曾經(jīng)待過一家公司是做新聞app的,所以對新聞類app特別執(zhí)著。折騰reactnative,flutter,android時,UI都是模仿這種新聞類。
先來看一下效果
android.gif
看這效果睦尽,順便參考了掘金的結構。
來看一下實現(xiàn)思路
先做沉侵式處理
<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導航欄朴则,實現(xiàn)方案為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"/>
這里會出現(xiàn)fragment嵌套fragment,為了避免出現(xiàn)滑動沖突钓简,重寫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控件撤蚊,在項目內(nèi)新建一個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>
=============
還有一些簡單的操作损话,比如webview... ... 大家可前往github查看
源碼