（android高仿系列）今日頭條 --新聞閱讀器（一）

設定歡迎界面的調整動畫，2秒 [java] view plain copy

start_anima = new AlphaAnimation(0.3f, 1.0f);
start_anima.setDuration(2000);
view.startAnimation(start_anima);
start_anima.setAnimationListener(new AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
// TODO Auto-generated method stub
}
@Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub
}
@Override
public void onAnimationEnd(Animation animation) {
// TODO Auto-generated method stub
redirectTo();//跳轉
}
});

之後便是主界面：

可以發現主界面上方的欄目欄是可以橫向拖動的，并且選擇。

（android高仿系列）今日頭條 --新聞閱讀器（一）

下面就首先來實作上部欄目拖動這個效果：

大體思路結構圖：

（android高仿系列）今日頭條 --新聞閱讀器（一）

整體的布局檔案是如下這樣：

[java] view plain copy

（android高仿系列）今日頭條 --新聞閱讀器（一）

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<include layout="@layout/main_head" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40.0dip"
android:background="#fff3f3f3"
android:orientation="horizontal" >
<RelativeLayout
android:id="@+id/rl_column"
android:layout_width="match_parent"
android:layout_height="40.0dip"
android:layout_weight="1.0" >
<com.topnews.view.ColumnHorizontalScrollView
android:id="@+id/mColumnHorizontalScrollView"
android:layout_width="match_parent"
android:layout_height="40.0dip"
android:scrollbars="none" >
<LinearLayout
android:id="@+id/mRadioGroup_content"
android:layout_width="fill_parent"
android:layout_height="40.0dip"
android:layout_centerVertical="true"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingLeft="10.0dip"
android:paddingRight="10.0dip" />
</com.topnews.view.ColumnHorizontalScrollView>
<ImageView
android:id="@+id/shade_left"
android:layout_width="10.0dip"
android:layout_height="40.0dip"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:background="@drawable/channel_leftblock"
android:visibility="gone" />
<ImageView
android:id="@+id/shade_right"
android:layout_width="10.0dip"
android:layout_height="40.0dip"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:background="@drawable/channel_rightblock"
android:visibility="visible" />
</RelativeLayout>
<LinearLayout
android:id="@+id/ll_more_columns"
android:layout_width="wrap_content"
android:layout_height="40.0dip" >
<ImageView
android:id="@+id/button_more_columns"
android:layout_width="40.0dip"
android:layout_height="40.0dip"
android:layout_gravity="center_vertical"
android:src="@drawable/channel_glide_day_bg" />
</LinearLayout>
</LinearLayout>
<View
android:id="@+id/category_line"
android:layout_width="fill_parent"
android:layout_height="0.5dip"
android:background="#ffdddddd" />
<android.support.v4.view.ViewPager
android:id="@+id/mViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>

由于發現HorizontalScrollView左右拖動的時候沒有那種陰影效果，是以在這裡，我們發現了頭條的資源檔案下有這麼2個檔案：

（android高仿系列）今日頭條 --新聞閱讀器（一）

這個就是它在白天模式和黑夜模式下用的陰影圖檔。那我們可以采取重寫HorizontalScrollView來判斷滾動，如果滾動時候不是在最左邊，顯示左邊陰影，不是在最右邊，顯示右邊陰影。

[java] view plain copy

（android高仿系列）今日頭條 --新聞閱讀器（一）

public class ColumnHorizontalScrollView extends HorizontalScrollView {
private View ll_content;
private View ll_more;
private View rl_column;
private ImageView leftImage;
private ImageView rightImage;
private int mScreenWitdh = 0;
private Activity activity;
public ColumnHorizontalScrollView(Context context) {
super(context);
}
public ColumnHorizontalScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public ColumnHorizontalScrollView(Context context, AttributeSet attrs,
int defStyle) {
super(context, attrs, defStyle);
}
@Override
protected void onScrollChanged(int paramInt1, int paramInt2, int paramInt3, int paramInt4) {
// TODO Auto-generated method stub
super.onScrollChanged(paramInt1, paramInt2, paramInt3, paramInt4);
shade_ShowOrHide();
if(!activity.isFinishing() && ll_content !=null && leftImage!=null && rightImage!=null && ll_more!=null && rl_column !=null){
if(ll_content.getWidth() <= mScreenWitdh){
leftImage.setVisibility(View.GONE);
rightImage.setVisibility(View.GONE);
}
}else{
return;
}
if(paramInt1 ==0){
leftImage.setVisibility(View.GONE);
rightImage.setVisibility(View.VISIBLE);
return;
}
if(ll_content.getWidth() - paramInt1 + ll_more.getWidth() + rl_column.getLeft() == mScreenWitdh){
leftImage.setVisibility(View.VISIBLE);
rightImage.setVisibility(View.GONE);
return;
}
leftImage.setVisibility(View.VISIBLE);
<span style="white-space:pre"> </span>rightImage.setVisibility(View.VISIBLE);
}
public void setParam(Activity activity, int mScreenWitdh,View paramView1,ImageView paramView2, ImageView paramView3 ,View paramView4,View paramView5){
this.activity = activity;
this.mScreenWitdh = mScreenWitdh;
ll_content = paramView1;
leftImage = paramView2;
rightImage = paramView3;
ll_more = paramView4;
rl_column = paramView5;
}
public void shade_ShowOrHide() {
if (!activity.isFinishing() && ll_content != null) {
measure(0, 0);
//如果整體寬度小于螢幕寬度的話，那左右陰影都隐藏
if (mScreenWitdh >= getMeasuredWidth()) {
leftImage.setVisibility(View.GONE);
rightImage.setVisibility(View.GONE);
}
} else {
return;
}
//如果滑動在最左邊時候，左邊陰影隐藏，右邊顯示
if (getLeft() == 0) {
leftImage.setVisibility(View.GONE);
rightImage.setVisibility(View.VISIBLE);
return;
}
//如果滑動在最右邊時候，左邊陰影顯示，右邊隐藏
if (getRight() == getMeasuredWidth() - mScreenWitdh) {
leftImage.setVisibility(View.VISIBLE);
rightImage.setVisibility(View.GONE);
return;
}
//否則，說明在中間位置，左、右陰影都顯示
leftImage.setVisibility(View.VISIBLE);
rightImage.setVisibility(View.VISIBLE);
}
}

之後

private ArrayList<NewsClassify> newsClassify=new ArrayList<NewsClassify>();

根據newsClassify這個欄目分類清單裡面的數量進行添加欄目。（這裡首先采用了自己限定的ITEM，而沒有進行資料庫的操作，以後加上）

ViewPage的擴充卡NewsFragmentPagerAdapter，通過ViewPage切換對應欄目的的Fragment：

[java] view plain copy

（android高仿系列）今日頭條 --新聞閱讀器（一）

public class NewsFragmentPagerAdapter extends FragmentPagerAdapter {
private ArrayList<Fragment> fragments;
private FragmentManager fm;
public NewsFragmentPagerAdapter(FragmentManager fm) {
super(fm);
this.fm = fm;
}
public NewsFragmentPagerAdapter(FragmentManager fm,
ArrayList<Fragment> fragments) {
super(fm);
this.fm = fm;
this.fragments = fragments;
}
@Override
public int getCount() {
return fragments.size();
}
@Override
public Fragment getItem(int position) {
return fragments.get(position);
}
@Override
public int getItemPosition(Object object) {
return POSITION_NONE;
}
public void setFragments(ArrayList<Fragment> fragments) {
if (this.fragments != null) {
FragmentTransaction ft = fm.beginTransaction();
for (Fragment f : this.fragments) {
ft.remove(f);
}
ft.commit();
ft = null;
fm.executePendingTransactions();
}
this.fragments = fragments;
notifyDataSetChanged();
}
@Override
public Object instantiateItem(ViewGroup container, final int position) {
Object obj = super.instantiateItem(container, position);
return obj;
}
}

之後添加欄目ITEM：

[java] view plain copy

（android高仿系列）今日頭條 --新聞閱讀器（一）

int count = newsClassify.size();
for(int i = 0; i< count; i++){
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(mItemWidth , LayoutParams.WRAP_CONTENT);
params.leftMargin = 10;
params.rightMargin = 10;
TextView localTextView = new TextView(this);
localTextView.setTextAppearance(this, R.style.top_category_scroll_view_item_text);
localTextView.setBackgroundResource(R.drawable.radio_buttong_bg);
localTextView.setGravity(Gravity.CENTER);
localTextView.setPadding(5, 0, 5, 0);
localTextView.setId(i);
localTextView.setText(newsClassify.get(i).getTitle());
localTextView.setTextColor(getResources().getColorStateList(R.color.top_category_scroll_text_color_day));
if(columnSelectIndex == i){
localTextView.setSelected(true);
}
localTextView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
for(int i = 0;i < mRadioGroup_content.getChildCount();i++){
View localView = mRadioGroup_content.getChildAt(i);
if (localView != v)
localView.setSelected(false);
else{
localView.setSelected(true);
mViewPager.setCurrentItem(i);
}
}
Toast.makeText(getApplicationContext(), newsClassify.get(v.getId()).getTitle(), Toast.LENGTH_SHORT).show();
}
});
mRadioGroup_content.addView(localTextView, i ,params);
}

之後根據選擇欄目的來調整ColumnHorizontalScrollView中的位置

[java] view plain copy

（android高仿系列）今日頭條 --新聞閱讀器（一）

<span style="white-space:pre"> </span>
private void selectTab(int tab_postion) {
columnSelectIndex = tab_postion;
for (int i = 0; i < mRadioGroup_content.getChildCount(); i++) {
View checkView = mRadioGroup_content.getChildAt(tab_postion);
int k = checkView.getMeasuredWidth();
int l = checkView.getLeft();
int i2 = l + k / 2 - mScreenWidth / 2;
// rg_nav_content.getParent()).smoothScrollTo(i2, 0);
mColumnHorizontalScrollView.smoothScrollTo(i2, 0);
// mColumnHorizontalScrollView.smoothScrollTo((position - 2) *
// mItemWidth , 0);
}
//判斷是否選中
for (int j = 0; j < mRadioGroup_content.getChildCount(); j++) {
View checkView = mRadioGroup_content.getChildAt(j);
boolean ischeck;
if (j == tab_postion) {
ischeck = true;
} else {
ischeck = false;
}
checkView.setSelected(ischeck);
}
}

完成的效果如下：

（android高仿系列）今日頭條 --新聞閱讀器（一）

更多注釋和實作方法可以檢視DEMO源碼檔案，源碼下載下傳位址： DEMO源碼

（android高仿系列）今日頭條 --新聞閱讀器（一）

繼續閱讀

Android項目的依賴關系解析

Android Studio 安裝具體步驟

三年開發經驗，從小廠離職後，我憑什麼拿到了阿裡、騰訊、今日頭條的offer我為什麼離職準備面試刷題履歷

Android網絡程式設計之使用HttpClient批量上傳檔案（一）1.預備知識：2.通過HttpCient上傳檔案程式運作效果圖：3.完成項目代碼：

Android網絡程式設計之使用HttpClient批量上傳檔案（二）AsyncTask+HttpClient并實作上傳進度監聽 Android網絡程式設計之使用HttpClient批量上傳檔案（二）AsyncTask+HttpClient并實作上傳進度監聽

android 使用shape自定義圓角矩形

為什麼不再使用 Android MVVM

方法數超了65535 無法安裝的解決方案

android調用系統相機拍攝擷取照片的兩種方法

Android調用系統拍照擷取圖檔問題

Android Studio中Make Project、Clean Project、Rebuild Project 的作用

新買的便攜式藍牙标簽列印機內建測試起因分析提供的SDK開始使用藍牙測試工具進行測試列印列印亂碼分析JAVA中Unicode轉ANCI工具連結

Android面試題——5.常見面試官提問Android面試題①

Android常用工具類簡介目錄

android常用工具類轉載自：http://www.trinea.cn/android/android-common-utils/Android常用工具類

Android電視機（機頂盒）初次開發的一些經驗分享

（android高仿系列）今日頭條 --新聞閱讀器 （一）

繼續閱讀

（android高仿系列）今日頭條 --新聞閱讀器（一）