`
xitongyunwei
  • 浏览: 916011 次
文章分类
社区版块
存档分类
最新评论

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吧。


分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics