Holo風格的開源中國Android客戶端——持續更新(2)

1、個人資料：

一、返回樣式

getSupportActionBar().setDisplayShowHomeEnabled(false);
getSupportActionBar().setDisplayShowTitleEnabled(true);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);

二、編輯頭像和刷新

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" >

    <item
        android:id="@+id/menu_userinfo_edit_btn"
        android:showAsAction="always"
        android:icon="@drawable/ic_action_edit"
        android:title="@string/userinfo_edit"/>
    
    <item
        android:id="@+id/menu_userinfo_refresh_btn"
        android:showAsAction="ifRoom"
        android:icon="@drawable/ic_action_refresh"
        android:title="@string/refresh"/>

</menu>

 

@Override
public boolean onCreateOptionsMenu(Menu menu) {
	getSupportMenuInflater().inflate(R.menu.menu_userinfo, menu);
	return super.onCreateOptionsMenu(menu);
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
	switch (item.getItemId()) {
	case android.R.id.home:
		finish();
		break;
	case R.id.menu_userinfo_edit_btn:
		CharSequence[] items = { getString(R.string.img_from_album),
				getString(R.string.img_from_camera) };
		imageChooseItem(items);
		break;
	case R.id.menu_userinfo_refresh_btn:
		loadUserInfoThread(true);
		break;
	default:
		break;
	}
	return super.onOptionsItemSelected(item);
}

三、截屏

   

 

四、執行耗時操做的提示方式

源代碼採用的是建立一個LoadingDialog對象，在刷新、上傳頭像的時候，顯示對話框，完成後消失。這個相似IOS上面的UIAlertView，如圖：

UIAlertView *alert = [[UIAlertView alloc]
                              initWithTitle:@"Something was done" 
                              message:msg 
                              delegate:self 
                              cancelButtonTitle:@"Phew!"
                              otherButtonTitles:nil];
        
[alert show];

 

在這裏，簡單的改造下，代碼和效果以下：

4.一、刷新

1)、在Activity的onCreate()中，設置requestWindowFeature

protected void onCreate(Bundle savedInstanceState) {
	requestWindowFeature(Window.FEATURE_INDETERMINATE_PROGRESS);
	super.onCreate(savedInstanceState);
	setContentView(R.layout.user_info);

	setTitle(R.string.main_menu_myinfo);

	// 初始化視圖控件
	this.initView();
	// 初始化視圖數據
	this.initData();
}

2)、刷新完成，取消「轉圈圈」

private void initData() {
	mHandler = new Handler() {
		@Override
		public void handleMessage(Message msg) {
			// if (loading != null)
			// loading.dismiss();

			setSupportProgressBarIndeterminateVisibility(false);

			// 刷新成功
			if (msg.what == 1 && msg.obj != null) {
				Toast.makeText(UserInfoActivity.this, "刷新成功",
						Toast.LENGTH_SHORT).show();
				user = (MyInformation) msg.obj;
				// 加載用戶頭像
				UIHelper.showUserFace(face, user.getFace());

 3)、開始刷新的時候，啓動「轉圈圈」

private void loadUserInfoThread(final boolean isRefresh) {
	// loading = new LoadingDialog(this);
	// loading.show();

	setSupportProgressBarIndeterminateVisibility(true);

// ......

4)、效果圖

     

 

4.二、上傳頭像

和刷新差很少，只是增長了提示語。關於提示，你們能夠有不一樣的創意好風格，這裏我就隨便挑個簡單的。你們若是有好的想法，歡迎提出來，供你們學習交流。

不過上傳的時候，採用這種設計並很差，由於用戶很容易按下返回鍵。因此我以爲仍是採用Dialog或AlertView更合適。

固然，這裏純粹爲了演示效果和偷懶，仍舊採用了和刷新同樣的「圓圈」。

1)、開始上傳，添加subtitle

// if (loading != null) {
// loading.setLoadText("正在上傳頭像···");
// loading.show();
// }

getSupportActionBar().setSubtitle("正在上傳頭像");
setSupportProgressBarIndeterminateVisibility(true);

2)、上傳完成，取消subtitle

// if (loading != null)
// loading.dismiss();

getSupportActionBar().setSubtitle(null);
setSupportProgressBarIndeterminateVisibility(false);

3)、效果圖

 

2、首頁資訊

一、享受閱讀：因爲去掉了底部的一組導航按鈕，因此顯示的有效空間更大，並且減小了對閱讀的干擾。

二、單手操做：橫向滑動時，切換頂部的三個Tab，切換更方便，特別是大屏手機，單手操做的話，很難在左圖中切換資訊、博客、閱讀。

   

 

3、Actionbar和Tab樣式簡介

Actionbar默認的主題有Theme.Holo.Light和Theme.Holo.Light.DarkActionBar，前者是灰白色的Actionbar，後者是黑色的Actionbar。

使用Theme.Holo.Light.DarkActionBar效果：

   

Twitter的登陸頁面(不知道我下載的這個是否是山寨的:)~~)

Path的商店界面

 

4、自定義

一、自定義Actionbar背景

下面是在values和values-14中自定義Actionbar樣式，因爲時間倉促(22點了，困~)，不必定徹底合理和正確，僅提供一種思路。

    1)、在res/values/styles目錄下，使用的是Theme.Sherlock.Light.DarkActionBar
          自定義的時候，只須要覆蓋它的actionBarStyle便可:

<style name="AppBaseTheme" parent="Theme.Sherlock.Light.DarkActionBar"></style>

<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
    <!-- All customizations that are NOT specific to a particular API-level can go here. -->
    <item name="actionBarStyle">@style/MyActionBarStyle</item>
</style>
    
<style name="MyActionBarStyle" parent="@style/Widget.Sherlock.Light.ActionBar.Solid.Inverse">
    <item name="background">@drawable/ab_custom_blue_holo_light</item>
</style>

固然，對應的字體顏色，圖標顏色，菜單樣式等等，均可能會變得不那麼協調了，這須要多覆蓋幾項其它樣式，好比字體顏色，圖標的普通樣式和按下樣式等。

最好都定義在本身寫的MyActionBar樣式中，不要直接去覆蓋系統的資源圖片、字體和顏色值等。

    2)、在res/values-14/styles目錄下，只須要覆蓋系統定義的便可：

<!--
        Base application theme for API 14+. This theme completely replaces
        AppBaseTheme from BOTH res/values/styles.xml and
        res/values-v11/styles.xml on API 14+ devices.
    -->
    <style name="AppBaseTheme" parent="android:Theme.Holo.Light">

        <!-- API 14 theme customizations can go here. -->
        <item name="android:actionBarStyle">@style/MyActionBarStyle</item>
    </style>

    <!-- Application theme. -->
    <style name="AppTheme" parent="AppBaseTheme"></style>

    <style name="MyActionBarStyle" parent="@android:style/Widget.Holo.Light.ActionBar">
        <item name="android:background">@drawable/ab_custom_blue_holo_light</item>
    </style>

上面的自定義，我只是簡單的處理了下，具體開發的話，應該更規範點。

二、項目源碼

https://git.oschina.net/xsjayz/OsChina_Slidingmenu_20130808