码迷,mamicode.com
首页 > 其他好文 > 详细

TouTiao开源项目 分析笔记3

时间:2017-12-02 20:20:43      阅读:264      评论:0      收藏:0      [点我收藏+]

标签:end   gif   警告   prim   turn   head   scale   ignore   auto   

1.搭建NewsTabLayout片段

1.1.加载布局 

@Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_news_tab, container, false);
        initView(view);
        initData();
        return view;
    }

 

1.2.布局文件==>R.layout.fragment_news_tab

  技术分享图片

  源代码如下:

技术分享图片
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/header_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout_news"
            style="@style/TabLayout"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:minHeight="?attr/actionBarSize"
            android:theme="@style/AppTheme.AppBarOverlay"
            app:tabTextColor="@color/gray">
        </android.support.design.widget.TabLayout>

        <ImageView
            android:id="@+id/add_channel_iv"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:background="?attr/selectableItemBackground"
            android:foreground="?attr/selectableItemBackground"
            android:maxHeight="?attr/actionBarSize"
            android:paddingBottom="4dp"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:paddingTop="4dp"
            android:scaleType="center"
            app:srcCompat="@drawable/ic_add_white_24dp"
            tools:ignore="ContentDescription"/>

    </LinearLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager_news"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        tools:layout="@layout/fragment_list">
    </android.support.v4.view.ViewPager>

</LinearLayout>
View Code

 

1.3.ViewPager中的 tools:layout="@layout/fragment_list

  技术分享图片

  源代码如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/windowBackground"
    android:orientation="vertical"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/refresh_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recycler_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fadeScrollbars="true"
            android:scrollbarFadeDuration="1"
            android:scrollbars="vertical"
            app:layoutManager="LinearLayoutManager">
        </android.support.v7.widget.RecyclerView>

    </android.support.v4.widget.SwipeRefreshLayout>
</LinearLayout>

 

1.4.android actionBar修改高度内容居中

   在TabLayout中需要设置一个属性才能设置让内容居中

android:minHeight="?attr/actionBarSize"

 

1.5.设置TabLayout的风格

  在styles.xml中加上TabLayout风格

   <style name="TabLayout" parent="Base.Widget.Design.TabLayout">
        <item name="tabMaxWidth">@dimen/design_tab_max_width</item>
        <item name="tabIndicatorColor">#FFFFFF</item>
        <item name="tabIndicatorHeight">2dp</item>
        <item name="tabPaddingStart">12dp</item>
        <item name="tabPaddingEnd">12dp</item>
        <item name="tabBackground">?attr/selectableItemBackground</item>
        <item name="tabTextAppearance">@style/TextAppearance.Design.Tab</item>
        <item name="tabSelectedTextColor">?android:textColorPrimary</item>
    </style>

 

1.6.tools:ignore意义

  参考文章:android中xml tools属性讲解详情。

  这里有一个tools:ignore="ContentDescription"

  这里的意思就是忽略ContentDescription的警告。

 

1.7.在ViewPager中为了支持滚动收缩,要设置app:layout_behavior 

 <android.support.v4.view.ViewPager
        android:id="@+id/view_pager_news"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        tools:layout="@layout/fragment_list">
    </android.support.v4.view.ViewPager>

  具体的app:layout_behavior是调用官方的一个行为: 

<string name="appbar_scrolling_view_behavior" translatable="false">android.support.design.widget.AppBarLayout$ScrollingViewBehavior</string>

 

1.8.设置滚动条

  这里设置滚动条淡出效果

android:scrollbarFadeDuration="1" 

  设置自动隐藏和显示

 android:fadeScrollbars="true"

 

1.9.将tablayout和viewpager创建联系

tab_layout.setupWithViewPager(viewPager);

 

1.10.设置tab模式

MODE_SCROLLABLE:可滚动tabs,显示一部分tabs,
在这个模式下能包含长标签和大量的tabs,最好用于用户不需要直接比较tabs。

 

 

 

 

 


2.一些示例文字

第二段

 


3.一些示例文字

第三段

 


4.一些示例文字

第四段

 


5.一些示例文字

第五段

 


6.一些示例文字

第六段

 



TouTiao开源项目 分析笔记3

标签:end   gif   警告   prim   turn   head   scale   ignore   auto   

原文地址:http://www.cnblogs.com/Jason-Jan/p/7955310.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!