A08_(完善)ProgressBar & SeekBar & RatingBar 進度條的設置

android常見的進度條有四種:

關係如下圖:

具體效果見下圖:


一、垂直風格的ProgressBar

ProgressBar的風格有六種:

1.Horizontal 水平風格

2.Small 小風格

3.Large 大風格

4.Inverse 反向風格

5.SmallInserve 小反向風格

6.LagreInserve 大反向風格

不管怎麼看,我都覺得效果除了大小之外差不多,據說Inserve、SmallInserve、LagreInserve適合淺色背景,LagreInserve、Large適合深色背景。

直接看效果吧,我也不標註了,看着眼花,敲代碼試一下就明白了

<RelativeLayout 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:background="#ff00ff"
    tools:context=".MainActivity" >

    <ProgressBar
        android:id="@+id/progressBarSevenId"
        style="?android:attr/progressBarStyleSmallTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/progressBarThreeId"
        android:layout_marginTop="48dp"
        android:background="#ff0000" />

    <ProgressBar
        android:id="@+id/progressBarSixId"
        style="?android:attr/progressBarStyleSmallInverse"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/progressBarSevenId"
        android:layout_toRightOf="@+id/progressBarOneId" />

    <ProgressBar
        android:id="@+id/progressBarOneId"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/progressBarThreeId"
        android:layout_alignParentLeft="true"
        android:layout_marginBottom="27dp" />

    <ProgressBar
        android:id="@+id/progressBarFourId"
        style="?android:attr/progressBarStyleLargeInverse"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/progressBarSevenId"
        android:layout_alignParentRight="true"
        android:layout_marginRight="32dp" />

    <ProgressBar
        android:id="@+id/progressBarFiveId"
        style="?android:attr/progressBarStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/progressBarTwoId"
        android:layout_alignTop="@+id/progressBarSixId" />

    <ProgressBar
        android:id="@+id/progressBarThreeId"
        style="?android:attr/progressBarStyleLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView1"
        android:layout_centerHorizontal="true" />

    <ProgressBar
        android:id="@+id/progressBarTwoId"
        style="?android:attr/progressBarStyleInverse"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/progressBarThreeId"
        android:layout_toRightOf="@+id/progressBarSixId" />

</RelativeLayout>

二、水平風格的ProgressBar

在xml文件中的設置:

最大進度:android:max=""

當前進度:android:progress=""  一般是主進度

第二進度:android:secondaryProgress="" 一般是子進度

設置當前進度條風格爲水平風格:style="?android:attr/progressBarStyleHorizontal"

在java中的設置:見java代碼

手機2.3.7效果:


xml代碼:

<RelativeLayout 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:background="@drawable/wood2"
    tools:context=".MainActivity" >

    <ProgressBar
        android:id="@+id/progressId"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dp" />

    <Button
        android:id="@+id/buttonId"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/progressId"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="30dp"
        android:text="點擊增加進度" />

    <TextView
        android:id="@+id/textViewId"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/progressId"
        android:layout_below="@id/progressId"
        android:text="當前子進度爲:" 
        android:textColor="#ff00ff"/>

</RelativeLayout>

java代碼:

package com.haut.a08_progressbar_v;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ProgressBar;
import android.widget.TextView;
import android.widget.Toast;

/**
 * 實現功能:點擊按鈕增加子進度值,當子進度到達最大值後提升主進度的值
 */
public class MainActivity extends Activity {
	private Button button;
	private ProgressBar progressBar;
	private TextView textView;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		button = (Button) findViewById(R.id.buttonId);
		progressBar = (ProgressBar) findViewById(R.id.progressId);
		textView = (TextView) findViewById(R.id.textViewId);
		// 設置最大進度
		progressBar.setMax(100);
		// 判斷當前的ProgressBar是水平進度條還是轉圈的進度條(垂直)
		boolean flag = progressBar.isIndeterminate();
		// 設置ProgressBar一次性增加的值
		// progressBar.incrementProgressBy(5);
		// progressBar.incrementSecondaryProgressBy(20);
		// 爲button綁定監聽器
		ButtonListener buttonListener = new ButtonListener();
		button.setOnClickListener(buttonListener);
	}

	class ButtonListener implements OnClickListener {
		// 記錄子進度
		int i = 0;
		// 記錄主進度
		int j = 0;

		public void onClick(View v) {
			if (i < 100) {
				// 如果子進度沒有達到最大值就增加子進度的值
				i += 10;
				progressBar.setSecondaryProgress(i);
				textView.setText("當前子進度爲:" + i + "%");
			} else {
				// 子進度達到最大值,將子進度的值清0,主進度值增加
				// 使用Toast提示當前進度值
				i = 0;
				j += 10;
				progressBar.setProgress(j);
				Toast.makeText(MainActivity.this, "當前總進度爲:" + j + "%",
						Toast.LENGTH_SHORT).show();
			}
		}

	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.activity_main, menu);
		return true;
	}

}

三、SeekBar

SeekBar和水平風格的ProgressBar的區別是SeekBar的進度是可以手動拖拽的。

使用的監聽器接口:OnSeekBarChangeListener

也可以設置SeekBar的最大進度,第一進度和第二進度。方法同水平風格的ProgressBar

手機2.3.7效果圖:


結合水平風格的ProgressBar寫的代碼,類似的功能不同測處理,具體見java代碼註釋。

xml代碼:

<RelativeLayout 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:background="@drawable/wood_2"
    tools:context=".MainActivity" >

    <SeekBar
        android:id="@+id/seekBarId"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="100"
        android:padding="20dp" />

    <Button
        android:id="@+id/buttonId"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/seekBarId"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="30dp"
        android:text="點擊增加進度" />

    <TextView
        android:id="@+id/textViewId"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/seekBarId"
        android:layout_below="@id/seekBarId"
        android:text="當前子進度爲:"
        android:textColor="#ff00ff" />

</RelativeLayout>

java代碼:

package com.haut.a08_seekbar;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.SeekBar;
import android.widget.TextView;
import android.widget.SeekBar.OnSeekBarChangeListener;
import android.widget.Toast;

public class MainActivity extends Activity {
	private SeekBar seekBar;
	private Button button;
	private TextView textView;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		seekBar = (SeekBar) findViewById(R.id.seekBarId);
		button = (Button) findViewById(R.id.buttonId);
		textView = (TextView) findViewById(R.id.textViewId);
		// 綁定監聽器
		SeekBarListener seekBaristener = new SeekBarListener();
		seekBar.setOnSeekBarChangeListener(seekBaristener);
		// 爲button綁定監聽器
		ButtonListener buttonListener = new ButtonListener();
		button.setOnClickListener(buttonListener);
	}

	class SeekBarListener implements OnSeekBarChangeListener {
		/**
		 * 參數解釋:
		 * seekBar		當前的SeekBard對像。可能Activity中有多個SeekBar。
		 * progress		當前SeekBar的進度
		 * fromUser		指當前的SeekBar的進度變化是否是由用戶拖拽引起的
		 */
		public void onProgressChanged(SeekBar seekBar, int progress,
				boolean fromUser) {
			Toast.makeText(MainActivity.this,
					"當前進度:" + progress + "%:是否用戶操作:" + fromUser,
					Toast.LENGTH_SHORT).show();
		}

		// 該方法顯示用戶開始拖拽,參數是當前操作的SeekBar
		public void onStartTrackingTouch(SeekBar seekBar) {
			Toast.makeText(MainActivity.this, "用戶開始操作", Toast.LENGTH_SHORT)
					.show();

		}

		// 該方法顯示用戶停止拖拽,參數是當前操作的SeekBar
		public void onStopTrackingTouch(SeekBar seekBar) {
			Toast.makeText(MainActivity.this, "用戶停止操作", Toast.LENGTH_SHORT)
					.show();

		}

	}

	class ButtonListener implements OnClickListener {
		// 記錄子進度
		int i = 0;
		// 記錄主進度
		int j = 0;

		public void onClick(View v) {
			if (i < 100) {
				// 如果子進度沒有達到最大值就增加子進度的值
				i += 10;
				seekBar.setSecondaryProgress(i);
				textView.setText("當前子進度爲:" + i + "%");
			} else {
				// 子進度達到最大值,將子進度的值清0,主進度值增加
				// 使用Toast提示當前進度值
				i = 0;
				j += 10;
				seekBar.setProgress(j);
				Toast.makeText(MainActivity.this, "當前總進度爲:" + j + "%",
						Toast.LENGTH_SHORT).show();
			}
		}

	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.activity_main, menu);
		return true;
	}

}

四、RatingBar

rating的中文解釋是:評價。那麼RatingBar的用途就不言而喻了。

主要的設置有:

設置星星的個數:numStart

評價精度:StepSize

使用的監聽器接口是:OnRatingBarChangeListener

手機效果圖:


xml代碼:

<RelativeLayout 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:background="@drawable/wood5"
    tools:context=".MainActivity" >

    <RatingBar
        android:id="@+id/RatingBarId"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true" />

    <Button
        android:id="@+id/buttonId"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/RatingBarId"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="40dp"
        android:text="增加評分" />

</RelativeLayout>


java代碼:

package com.example.a08_ratingbar;


import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.RatingBar;
import android.widget.RatingBar.OnRatingBarChangeListener;
import android.widget.Toast;


public class MainActivity extends Activity {
	private RatingBar ratingBar;
	private Button button;


	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		ratingBar = (RatingBar) findViewById(R.id.RatingBarId);
		button = (Button) findViewById(R.id.buttonId);
		// 設置星星的個數
		ratingBar.setNumStars(5);
		// 設置每次前進的進度
		ratingBar.setStepSize(0.5f);
		// 綁定監聽器
		RatingBarListener ratingBarListener = new RatingBarListener();
		ratingBar.setOnRatingBarChangeListener(ratingBarListener);
		ButtonListener buttonListener = new ButtonListener();
		button.setOnClickListener(buttonListener);


	}


	class RatingBarListener implements OnRatingBarChangeListener {


		public void onRatingChanged(RatingBar ratingBar, float rating,
				boolean fromUser) {
			Toast.makeText(MainActivity.this,
					"當前的分:" + rating + "顆星," + "是否用戶操作:" + fromUser,
					Toast.LENGTH_SHORT).show();
		}
	}


	class ButtonListener implements OnClickListener {


		public void onClick(View v) {
			// 設置當前RatingBar的得分等級
			ratingBar.setRating(ratingBar.getRating() + 0.5f);
		}


	}


	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.activity_main, menu);
		return true;
	}


}


唉~,先嘆口氣。這兩天調了好久的Android Studio,windows和linux下各種切換,不停的查資料,搞的這篇博客停了這麼久。不過總算寫完了。Android Studio現在的版本是0.1.1.我沒解決的問題是,在一個Project創建一個新的module的時候,R文件要麼沒有要麼無法自動生成代碼。初學階段還是老老實實的用eclipse吧。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章