1. 程式人生 > >(android高仿系列)今日頭條 --新聞閱讀器 (二)

(android高仿系列)今日頭條 --新聞閱讀器 (二)

wpa statistic 範圍 log -m 顯示效果 ngs 陰影 pup

高仿今日頭條 --- 第一篇:(android高仿系列)今日頭條 --新聞閱讀器 (一)? ?

上次,已經完畢了頭部新聞分類欄目的拖動效果。

這篇文章是繼續去完好APP 今日頭條 ?這個新聞閱讀器的其它功能。

這次所實現的功能清單

1.通過SlidingMenu實現左右側拉菜單效果

2.通過重寫CompoundButton實現--晝夜模式切換button效果。

3.通過PopupWindow控件實現了列表中很多其它菜單彈框操作效果。

4.通過universal-image-loader

庫實現了圖片的載入和緩存。

5.通過列表中各個屬性的推斷,實現了頭條新聞列表的相應布局和顯示效果。


下面把每一個功能和相應的實現方式相關博文都列出了。方便大家依據自身需求查看。


下面就是官方的效果截圖,具體操作請繼續向下看。

技術分享圖片? ? ? ? ? ? ? ??技術分享圖片


一.通過SlidingMenu實現左右側拉菜單效果

在第一講中。我們已經知道了,它使用了SlidingMenu 這個側拉菜單開源庫,所以我特地將?SlidingMenu的使用和配置寫了一個文章,文章地址:Android SlidingMenu 開源項目 側拉菜單的使用(具體配置)

所以具體的配置就不在這裏說明了,大家能夠去看上面給的鏈接。

註意:因為 今日頭條用的是左右都能夠側拉的菜單,所以設置側拉模式為:SlidingMenu.LEFT_RIGHT。代碼例如以下

localSlidingMenu.setMode(SlidingMenu.LEFT_RIGHT);//設置左右滑菜單  
因為左右能夠拖出菜單。而且中間的ViewPager能夠切換新聞頁面,所以SlidingMenu的必須如此設置下面屬性:

localSlidingMenu.setTouchModeAbove(SlidingMenu.SLIDING_WINDOW);//設置要使菜單滑動,觸碰屏幕的範圍
SLIDEING_WINDOW就是觸摸邊緣才會出發,這種話滑動操作就不用沖突了。

為了方便代碼的維護,我將SlidingMenu?自己定義成了一個DrawerView類,這種話全部菜單中的操作就和主界面分離開來,代碼就不會顯得那麽臃腫了,而且在用到的地址直接實例化這個類就能夠了。

代碼例如以下:

public class DrawerView implements OnClickListener{
	private final Activity activity;
	SlidingMenu localSlidingMenu;
	private SwitchButton night_mode_btn;
	private TextView night_mode_text;
	private RelativeLayout setting_btn;
	public DrawerView(Activity activity) {
		this.activity = activity;
	}

	public SlidingMenu initSlidingMenu() {
		localSlidingMenu = new SlidingMenu(activity);
		localSlidingMenu.setMode(SlidingMenu.LEFT_RIGHT);//設置左右滑菜單
		localSlidingMenu.setTouchModeAbove(SlidingMenu.SLIDING_WINDOW);//設置要使菜單滑動,觸碰屏幕的範圍
//		localSlidingMenu.setTouchModeBehind(SlidingMenu.RIGHT);
		localSlidingMenu.setShadowWidthRes(R.dimen.shadow_width);//設置陰影圖片的寬度
		localSlidingMenu.setShadowDrawable(R.drawable.shadow);//設置陰影圖片
		localSlidingMenu.setBehindOffsetRes(R.dimen.slidingmenu_offset);//SlidingMenu劃出時主頁面顯示的剩余寬度
		localSlidingMenu.setFadeDegree(0.35F);//SlidingMenu滑動時的漸變程度
		localSlidingMenu.attachToActivity(activity, SlidingMenu.RIGHT);//使SlidingMenu附加在Activity右邊
//		localSlidingMenu.setBehindWidthRes(R.dimen.left_drawer_avatar_size);//設置SlidingMenu菜單的寬度
		localSlidingMenu.setMenu(R.layout.left_drawer_fragment);//設置menu的布局文件
//		localSlidingMenu.toggle();//動態推斷自己主動關閉或開啟SlidingMenu
		localSlidingMenu.setSecondaryMenu(R.layout.profile_drawer_right);
		localSlidingMenu.setSecondaryShadowDrawable(R.drawable.shadowright);
		localSlidingMenu.setOnOpenedListener(new SlidingMenu.OnOpenedListener() {
					public void onOpened() {
						
					}
				});
		
		initView();
		return localSlidingMenu;
	}

	private void initView() {
		night_mode_btn = (SwitchButton)localSlidingMenu.findViewById(R.id.night_mode_btn);
		night_mode_text = (TextView)localSlidingMenu.findViewById(R.id.night_mode_text);
		night_mode_btn.setOnCheckedChangeListener(new OnCheckedChangeListener() {
			
			@Override
			public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
				// TODO Auto-generated method stub
				if(isChecked){
					night_mode_text.setText(activity.getResources().getString(R.string.action_night_mode));
				}else{
					night_mode_text.setText(activity.getResources().getString(R.string.action_day_mode));
				}
			}
		});
		night_mode_btn.setChecked(false);
		if(night_mode_btn.isChecked()){
			night_mode_text.setText(activity.getResources().getString(R.string.action_night_mode));
		}else{
			night_mode_text.setText(activity.getResources().getString(R.string.action_day_mode));
		}
		
		setting_btn =(RelativeLayout)localSlidingMenu.findViewById(R.id.setting_btn);
		setting_btn.setOnClickListener(this);
	}

	@Override
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.setting_btn:
			activity.startActivity(new Intent(activity,SettingsActivity.class));
			activity.overridePendingTransition(R.anim.slide_in_right, R.anim.slide_out_left);
			break;

		default:
			break;
		}
	}
}

2.通過重寫CompoundButton實現--晝夜模式切換button效果

看源代碼發現,今日頭條的中的是SwitchButton晝夜模式選擇控件,是通過重寫CompoundButton實現的,下面便是實現相應方法的相關帖子:

SwitchButton 開關button 的多種實現方式 (附源代碼DEMO)

依據需求選擇你喜歡的SwitchButton去改動和使用。


3.通過PopupWindow控件實現了列表中很多其它菜單彈框操作效果。

在開發中發現,每一個新聞列表中相應的ITEM中button出發的彈框效果事實上是通過PopupWindow實現的,相關博文例如以下 android 仿 新聞閱讀器 菜單彈出效果(附源代碼DEMO)

4.通過universal-image-loader庫實現了圖片的載入和緩存。

一個新聞client肯定涉及到一個圖片異步載入緩存的方法。所以這裏使用開發中最經常使用的開源庫之中的一個

universal-image-loader來實現相關的需求。假設你對這個庫的使用不是非常了解的話,能夠查看下面鏈接:

Android-Universal-Image-Loader 圖片異步載入類庫的使用(超具體配置)
---依據你需求配置相應的屬性就可以。

5.通過列表中各個屬性的推斷,實現了頭條新聞列表的相應布局和顯示效果。

新聞client中,每一個新聞的布局都可能不一樣,所以你能夠選擇2種最經常使用的方式去依據需求改變一個LISTVIEW裏面的布局。 1.操作上會麻煩一點,維護起來非常方便 BaseAdapter中有個自帶的方法。就是getViewTypeCount()?。用戶能夠使用這種方法獲取ITEM的種類數量。之後在getView()的時候推斷相應到額種類type之後設給他相應的布局就可以,常見的樣例有:唱吧中的名人榜

2.操作上非常方便,僅僅用依據需求設置布局的顯示隱藏效果。缺點:假設控件一多,不在凝視的話,可能維護起來就非常麻煩。
在這裏,事實上採用第2種方式就能夠了,分析它相應的下面布大致的5種局: 技術分享圖片 ? 布局---1? 技術分享圖片
布局---2 技術分享圖片
布局---3
技術分享圖片
布局---4 技術分享圖片
布局---5

分析上述布局,事實上他們的大體布局是一樣的,知識依據圖片的張數,圖片的大小。以及新聞類別的評論來推斷布局的相應顯示隱藏問題。僅僅要依據相相應的屬性便能夠非常好的實現這個效果。所以方法2是最合適的。

其它操作就是依據server返回的數據類型,是否為空等作相應操作就可以。

上述就是眼下完畢的進度,盡管數據啥都是在本地寫死的,但是已經大體的算得上是的一個新聞閱讀器了,之後會繼續完好其它為完畢的功能。

開發中的幾個問題總結:

關於Fragment

1)

@Override
public void onAttach(Activity activity) {
// TODO Auto-generated method stub
this.activity = activity;
super.onAttach(activity);
}

通過onAttach()方法獲取父類ACTIVITY。假設在調用getActivity()方法獲取的話,可能會在FRAGMENT被回收後報空指針錯誤。

2)

看今日頭條的效果是。沒切換至類型界面後,才去刷新數據。Fragment自帶了這種方法,例如以下

public void setUserVisibleHint(boolean isVisibleToUser) {}
你能夠推斷isVisibleToUser屬性來知道是否是切換的界面已經全然可見。之後進行操作。代碼中也凝視了。


下面看看這次的效果圖:

技術分享圖片? ? ? ? ? ??技術分享圖片

技術分享圖片? ? ? ? ? ?技術分享圖片


最後附上源代碼DEMO地址:下載地址

可能在代碼方面寫的不是非常好,優化不足,希望大家提出來。共同進步。轉載請註明http://blog.csdn.net/vipzjyno1/article/details/23619269

謝謝。

(android高仿系列)今日頭條 --新聞閱讀器 (二)