Android實現網易新聞客戶端首頁效果

Android實現網易新聞客戶端首頁效果
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

關於實現網易新聞客戶端的介面,以前寫過很多部落格,請參考:

Android實現網易新聞客戶端效果

Android實現網易新聞客戶端側滑選單(一)

Android實現網易新聞客戶端側滑選單(二)

今天用ViewPager FragmentAdapter ViewPagerIndicator來實現。

ViewPagerIndicator是一款分頁指標小部件相容ViewPager,封裝上做得非常不錯,目前已為眾多知名應用所使用。具體API的使用,大家可以下載官方demo示例研究研究就知道啦!

下載地址:https://github.com/JakeWharton/ViewPagerIndicator

sample是提供給我們的例子,library是庫工程,我們需要將其作為我們自己專案的依賴庫,我們新建一個Android工程,將library匯入工程我就不介紹了。

注:

Eclipse: 如果你新建的專案libs目錄下面有android-support-v4.jar,你要將其刪除,因為ViewPageIndicator裡面有這個庫,我們專案中不允許兩個android-support-v4.jar,不刪除我們的專案不能編譯的。

Android Studio: 直接import module就行。

activity_main.xml


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:orientation="vertical" > 
<include layout="@layout/activity_top" /> 
<com.viewpagerindicator.TabPageIndicator 
android:id="@ id/indicator" 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:background="@android:color/transparent" > 
</com.viewpagerindicator.TabPageIndicator> 
<android.support.v4.view.ViewPager 
android:id="@ id/viewpager" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:background="#EEF3FA"> 
</android.support.v4.view.ViewPager> 
</LinearLayout> 

佈局很簡單,頂部引入了一個activity_top.xml的佈局,具體內容可以自己定義。
MainActivity.java


package com.jackie.neteasenews; 
import android.os.Bundle; 
import android.support.v4.app.Fragment; 
import android.support.v4.app.FragmentActivity; 
import android.support.v4.view.ViewPager; 
import com.viewpagerindicator.TabPageIndicator; 
import java.util.ArrayList; 
import java.util.List; 
public class MainActivity extends FragmentActivity { 
private TabPageIndicator mTabPageIndicator; 
private ViewPager mViewPager; 
private ViewPagerIndicatorAdapter mAdapter; 
private HeadlineFragment mHeadlineFragment; 
private EnjoyFragment mEnjoyFragment; 
private HotspotFragment mHotspotFragment; 
private SportFragment mSportFragment; 
private HouseFragment mHouseFragment; 
private List<Fragment> mFragmentList; 
@Override 
protected void onCreate(Bundle savedInstanceState) { 
super.onCreate(savedInstanceState); 
setContentView(R.layout.activity_main); 
initView(); 
} 
private void initView() { 
mTabPageIndicator = (TabPageIndicator) findViewById(R.id.indicator); 
mViewPager = (ViewPager) findViewById(R.id.viewpager); 
mHeadlineFragment = new HeadlineFragment(); 
mEnjoyFragment = new EnjoyFragment(); 
mHotspotFragment = new HotspotFragment(); 
mSportFragment = new SportFragment(); 
mHouseFragment = new HouseFragment(); 
mFragmentList = new ArrayList<>(); 
mFragmentList.add(mHeadlineFragment); 
mFragmentList.add(mEnjoyFragment); 
mFragmentList.add(mHotspotFragment); 
mFragmentList.add(mSportFragment); 
mFragmentList.add(mHouseFragment); 
mAdapter = new ViewPagerIndicatorAdapter(getSupportFragmentManager(), mFragmentList); 
mViewPager.setAdapter(mAdapter); 
//例項化TabPageIndicator然後設定ViewPager與之關聯 
mTabPageIndicator.setViewPager(mViewPager, 1); 
} 
} 

ViewPagerIndicatorAdapter.java


package com.jackie.neteasenews; 
import android.support.v4.app.Fragment; 
import android.support.v4.app.FragmentManager; 
import android.support.v4.app.FragmentPagerAdapter; 
import java.util.List; 
public class ViewPagerIndicatorAdapter extends FragmentPagerAdapter { 
private List<Fragment> mFragmentList; 
public static String[] TITLES = new String[] { "頭條", "娛樂", "熱點", "體育", "房產" }; 
public ViewPagerIndicatorAdapter(FragmentManager fm, List<Fragment> fragmentList) { 
super(fm); 
this.mFragmentList = fragmentList; 
} 
@Override 
public Fragment getItem(int position) { 
return mFragmentList.get(position); 
} 
@Override 
public int getCount() { 
return mFragmentList.size(); 
} 
@Override 
public CharSequence getPageTitle(int position) { 
return TITLES[position]; 
} 
} 

程式碼很簡單,但是有一點,上面的Indicator是系統預設的,不太好看,所以還需要在styles.xml新增下面的樣式:


<style name="StyledTabPageIndicator" parent="@android:style/Theme.Light"> 
<item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item> 
<item name="android:windowNoTitle">true</item> 
<item name="android:animationDuration">5000</item> 
<item name="android:windowContentOverlay">@null</item> 
</style> 
<style name="CustomTabPageIndicator" parent="Widget"> 
<item name="android:gravity">center</item> 
<item name="android:background">@drawable/tab_indicator</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">8dp</item> 
<item name="android:paddingBottom">8dp</item> 
<item name="android:textAppearance">@style/CustomTabPageIndicator.Text</item> 
<item name="android:textSize">16sp</item> 
<item name="android:maxLines">1</item> 
</style> 
<style name="CustomTabPageIndicator.Text" parent="Widget"> 
<item name="android:textColor">@drawable/tab_text</item> 
</style> 

注意:開發中過程中跟Fragment相關的類,匯入包時會提示兩個包android.app 和 android.support.v4.app,切記,要保證所有類都匯入同一個包下的,否則會編譯報錯。

效果圖如下:

附上原始碼地址:https://github.com/shineflower/NeteaseNews.git

相關文章

Android 開發 最新文章