- 新闻详情页面的实现
新闻类的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();
}
}