Android新聞客戶端筆記(2)

  • 新聞詳情頁面的實現

在這裏插入圖片描述

新聞類的app都有一些共性,那就是有一行頁籤,然後點擊頁籤的內容後,會跳轉到對應的頁面。有很多此類app都是用到了ViewPagerIndicator這個開源框架。
ViewPagerIndicator是安卓大神JakeWharton的作品,頁籤指示器,項目中經常會遇到。

1、import modle
導入sample會默認導入library

C:\Users\LshyER\Desktop\北京新聞資料\1.上課資源\day3\資料\ViewPagerIndicator-master\sample

2、修改build.gradle.運行sample

apply plugin: 'com.android.application'

android {
    compileSdkVersion 28
    buildToolsVersion "28.0.3"

    defaultConfig {
        applicationId "com.viewpagerindicator.sample"
        minSdkVersion 15
        targetSdkVersion 28
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.txt'
        }
    }
}

dependencies {
    implementation project(':ViewPagerIndicator_library')
   // implementation 'com.android.support:support-v4:18.+'
}

在這裏插入圖片描述

3、將需要的功能框架copy到本地項目

關聯庫
在這裏插入圖片描述

2、添加布局,並在新聞詳情頁面實例化

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.viewpagerindicator.TabPageIndicator
        android:id="@+id/tabPageIndicator"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"></com.viewpagerindicator.TabPageIndicator>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        ></android.support.v4.view.ViewPager>

</LinearLayout>

3、ViewPager和TabPageIndicator關聯
(注意以後監聽頁面的變化,TabPageIndicator監聽頁面的變化)

public class NewsMenuDetailPager extends MenuDetalBassPager {

    **@ViewInject(R.id.tabPageIndicator)
    private TabPageIndicator tabPageIndicator;**

    @ViewInject(R.id.viewpager)
    private ViewPager viewPager;
      
  @Override
    public void initData() {
      super.initData();
        //新聞詳情頁面內數據初始化
        //準備新聞詳情頁面數據
        tableDetalPagers=new ArrayList<>();
        for (int i = 0; i <children.size() ; i++) {
            tableDetalPagers.add(new TableDetalPager(context,children.get(i)));

        }
        //設置ViewPager適配器
        viewPager.setAdapter(new MyNewMenuDetailPagerAdapter());

       /* ViewPager和TabPageIndicator關聯
       * (注意以後監聽頁面的變化,TabPageIndicator監聽頁面的變化)
       * */
       tabPageIndicator.setViewPager(viewPager);


    }

 class MyNewMenuDetailPagerAdapter extends PagerAdapter{

/*
        * 顯示標題
        * */
        **@Nullable
        @Override
        public CharSequence getPageTitle(int position) {
            return children.get(position).getTitle();
        }**

        @Override
        public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
            container.removeView((View)object);
        }

        @NonNull
        @Override
        public Object instantiateItem(@NonNull ViewGroup container, int position) {

            TableDetalPager tableDetalPager=tableDetalPagers.get(position);
            View rootView=tableDetalPager.rootView;
            tableDetalPager.initData();//初始化數據
            container.addView(rootView);
            return rootView;
        }

        @Override
        public int getCount() {
            return tableDetalPagers.size();
        }

        @Override
        public boolean isViewFromObject(@NonNull View view, @NonNull Object o) {
            return view==o;
        }
    }
}

3、優化UI樣式 (設置樣式)在這裏插入圖片描述

(1)粘貼到自己的清單文件中

<activity android:name=".activity.GuideActivity" />
        <activity android:name=".activity.MainActivity"
            android:theme="@style/Theme.PageIndicatorDefaults"
            ></activity>

(2)進入@style/Theme.PageIndicatorDefaults,添加字體顏色

<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright (C) 2011 Jake Wharton

     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
     You may obtain a copy of the License at

          http://www.apache.org/licenses/LICENSE-2.0

     Unless required by applicable law or agreed to in writing, software
     distributed under the License is distributed on an "AS IS" BASIS,
     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     See the License for the specific language governing permissions and
     limitations under the License.
-->

<resources>
    <style name="Theme.PageIndicatorDefaults" parent="android:Theme">
        <item name="vpiIconPageIndicatorStyle">@style/Widget.IconPageIndicator</item>
        <item name="vpiTabPageIndicatorStyle">@style/Widget.TabPageIndicator</item>
    </style>

    <style name="Widget">
    </style>

    <style name="Widget.TabPageIndicator" parent="Widget">
        <item name="android:gravity">center</item>
        <item name="android:background">@drawable/vpi__tab_indicator</item>
        <item name="android:paddingLeft">22dip</item>
        <item name="android:paddingRight">22dip</item>
        <item name="android:paddingTop">12dp</item>
        <item name="android:paddingBottom">12dp</item>
        <item name="android:textAppearance">@style/TextAppearance.TabPageIndicator</item>
        <item name="android:textSize">15sp</item>
        <!--添加字體顏色-->
        <item name="android:textColor">@drawable/vpi__tab_textcolor_indicator</item>
        <item name="android:maxLines">1</item>
    </style>

    <style name="TextAppearance.TabPageIndicator" parent="Widget">
        <item name="android:textStyle">bold</item>
        <item name="android:textColor">@color/vpi__dark_theme</item>
    </style>

    <style name="Widget.IconPageIndicator" parent="Widget">
        <item name="android:layout_marginLeft">6dp</item>
        <item name="android:layout_marginRight">6dp</item>
    </style>
</resources>

默認黑色,按下紅色

<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright (C) 2008 The Android Open Source Project

     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
     You may obtain a copy of the License at

          http://www.apache.org/licenses/LICENSE-2.0

     Unless required by applicable law or agreed to in writing, software
     distributed under the License is distributed on an "AS IS" BASIS,
     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     See the License for the specific language governing permissions and
     limitations under the License.
-->

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Non focused states -->
    <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:color="@android:color/black" />  <!--默認改成透明-->
    <item android:state_focused="false" android:state_selected="true"  android:state_pressed="false" android:color="@android:color/holo_red_light" />

    <!-- Focused states -->
    <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:color="@android:color/black" />
    <item android:state_focused="true" android:state_selected="true"  android:state_pressed="false" android:color="@android:color/holo_red_light" />

    <!-- Pressed -->
    <!--    Non focused states -->
    <item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:color="@android:color/black" />
    <item android:state_focused="false" android:state_selected="true"  android:state_pressed="true" android:color="@android:color/holo_red_light" />

    <!--    Focused states -->
    <item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:color="@android:color/black" />
    <item android:state_focused="true" android:state_selected="true"  android:state_pressed="true" android:color="@android:color/holo_red_light" />
</selector>

(3)進入 @drawable/vpi__tab_indicator 修改默認樣式

<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright (C) 2008 The Android Open Source Project

     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
     You may obtain a copy of the License at
  
          http://www.apache.org/licenses/LICENSE-2.0
  
     Unless required by applicable law or agreed to in writing, software
     distributed under the License is distributed on an "AS IS" BASIS,
     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     See the License for the specific language governing permissions and
     limitations under the License.
-->

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Non focused states -->
    <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@android:color/transparent" />  <!--默認改成透明-->
    <item android:state_focused="false" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/news_tab_item_bg_select" />

    <!-- Focused states -->
    <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@android:color/transparent" />
    <item android:state_focused="true" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/news_tab_item_bg_select" />

    <!-- Pressed -->
    <!--    Non focused states -->
    <item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="@android:color/transparent" />
    <item android:state_focused="false" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/news_tab_item_bg_select" />

    <!--    Focused states -->
    <item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="@android:color/transparent" />
    <item android:state_focused="true" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/news_tab_item_bg_select" />
</selector>
  • 軟件結構圖(已更新)

在這裏插入圖片描述

  • 設置按鈕點擊事件 newsmenu_detail_pagerr.xml
<LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    <com.viewpagerindicator.TabPageIndicator
        android:id="@+id/tabPageIndicator"
        android:layout_gravity="center_vertical"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"></com.viewpagerindicator.TabPageIndicator>
    <ImageButton
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:id="@+id/ib_tab_next"
        android:src="@drawable/news_cate_arr"
        android:layout_gravity="center_vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:background="@android:color/transparent"/>

    </LinearLayout>

NewsMenuDetailPager實例化並實現點擊事件

public class NewsMenuDetailPager extends MenuDetalBassPager {

    @ViewInject(R.id.tabPageIndicator)
    private TabPageIndicator tabPageIndicator;

    @ViewInject(R.id.viewpager)
    private ViewPager viewPager;

    @ViewInject(R.id.ib_tab_next)
    private ImageButton ib_tab_next;
  @Override
    public View initView() {

        View view =View.inflate(context, newsmenu_detail_pagerr,null);
        //使用xUtil初始化
        x.view().inject(NewsMenuDetailPager.this,view);

        //設置按鈕點擊事件
        ib_tab_next.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                viewPager.setCurrentItem(viewPager.getCurrentItem()+1);

            }
        });

        return view;
    }
    }

在這裏插入圖片描述

在 TabPageIndicator 中添加dispatchTouchEvent方法

  /*
    * 要求父層視圖不攔截觸摸事件
    * */

    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {

        /*
        * true:禁言攔截,禁言父層視圖
        * false:不禁用
        * */
        getParent().requestDisallowInterceptTouchEvent(true);
        return super.dispatchTouchEvent(ev);
    }

在這裏插入圖片描述

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="180dp">

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="180dp"/>

        <RelativeLayout
            android:padding="5dp"
            android:background="@android:color/darker_gray"
            android:layout_alignParentBottom="true"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:layout_centerVertical="true"
                android:id="@+id/tv_title"
                android:text="肖戰北京活動取消"
                android:textColor="@android:color/white"
                android:layout_marginLeft="8dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

            <LinearLayout
                android:id="@+id/ll_point_group"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_marginRight="8dp"
                />


        </RelativeLayout>


    </RelativeLayout>

    <ListView
        android:id="@+id/listview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></ListView>

</LinearLayout>
public class TableDetalPager extends MenuDetalBassPager {
    private final NewsCenterPagerBean2.DetailPagerData.ChildrenData childrenData;
  //  private TextView textView;
    private String url;
    public TableDetalPager(Context context, NewsCenterPagerBean2.DetailPagerData.ChildrenData childrenData) {
        super(context);
        this.childrenData=childrenData;
    }

    @Override
    public View initView() {
        View view=View.inflate(context, R.layout.tabletail_pager,null);



        return view;
    }

    @Override
    public void initData() {
        super.initData();


        url=Constants.BASE_URL+childrenData.getUrl();

    }
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章