美文网首页freeCodeCamp技术专栏需要使用
一个大型新闻app的骨架(android)

一个大型新闻app的骨架(android)

作者: YuTao_ | 来源:发表于2018-05-09 16:48 被阅读20次

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

    先来看一下效果

    android.gif

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

    来看一下实现思路

    先做沉侵式处理

     <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>
    

    =============

    还有一些简单的操作,比如webview... ... 大家可前往github查看
    源码

    相关文章

      网友评论

      • markRao:问个问题,什么叫骨架???
        生活简单些:@萬物並作吾以觀復 Android SDK下的tools/bin里有个uiautomatorviewer的工具,可以帮你分析App Activity的层次结构,或许可以帮到你,不过同样的交互UI实现方式太多了,条条大路通罗马,不限规则。
        markRao:@生活简单些 像美团饿了么或者简书的骨架是怎么做的😂😂😂
        生活简单些:@萬物並作吾以觀復 当然是骨头架啦😆

      本文标题:一个大型新闻app的骨架(android)

      本文链接:https://www.haomeiwen.com/subject/rlforftx.html