- 新聞詳情頁面的實現
新聞類的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();
}
}