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();

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