简单组合Android原生控件制作仿iphone步骤指示器

基本思路，LinearLayout设置为水平方向， 添加几个FrameLayout，每个FrameLayout中再添加一个ImageView作背景，添加一个TextView作标签，简单吧，先上个效果图：



再看代码：

StepIndicator.java

package com.zjg.smart.android.view;

import android.content.Context;

import android.os.Looper;

import android.util.AttributeSet;

import android.view.Gravity;

import android.view.View;

import android.widget.FrameLayout;

import android.widget.ImageView;

import android.widget.ImageView.ScaleType;

import android.widget.LinearLayout;

import android.widget.TextView;

public class StepIndicator extends LinearLayout {

public interface OnStepChangeListener {

public void onStepChange(int newStep, int oldStep);

}

private Context context = null;

private FrameLayout[] indicatorLayouts = null;

private ImageView[] indicatorImageViews = null;

private TextView[] indicatorTextViews = null;

private int currentStep = 0;

private OnStepChangeListener onStepChangeListener = null;

public StepIndicator(Context context) {

super(context);

// TODO 自动生成的构造函数存根

this.context = context;

}

public StepIndicator(Context context, AttributeSet attrs) {

super(context, attrs);

// TODO 自动生成的构造函数存根

this.context = context;

}

public StepIndicator(Context context, AttributeSet attrs, int defStyle) {

super(context, attrs, defStyle);

// TODO 自动生成的构造函数存根

this.context = context;

}

public synchronized void initialize(int stepCount,

OnStepChangeListener onStepChangeListener) {

if (stepCount <= 0) {

throw new IllegalArgumentException("stepCount=" + stepCount);

}

setOrientation(LinearLayout.HORIZONTAL);

indicatorLayouts = new FrameLayout[stepCount];

indicatorImageViews = new ImageView[stepCount];

indicatorTextViews = new TextView[stepCount];

for (int i = 0; i < stepCount; i++) {

indicatorLayouts[i] = new FrameLayout(context);

indicatorImageViews[i] = new ImageView(context);

FrameLayout.LayoutParams flp = new FrameLayout.LayoutParams(

FrameLayout.LayoutParams.MATCH_PARENT,

FrameLayout.LayoutParams.MATCH_PARENT);

flp.gravity = Gravity.CENTER;

indicatorLayouts[i].addView(indicatorImageViews[i], flp);

indicatorTextViews[i] = new TextView(context);

indicatorTextViews[i].setGravity(Gravity.CENTER);

indicatorTextViews[i].setText("step" + i);

flp = new FrameLayout.LayoutParams(

FrameLayout.LayoutParams.MATCH_PARENT,

FrameLayout.LayoutParams.MATCH_PARENT);

flp.gravity = Gravity.CENTER;

indicatorLayouts[i].addView(indicatorTextViews[i], flp);

LinearLayout.LayoutParams llp = new LinearLayout.LayoutParams(

LinearLayout.LayoutParams.MATCH_PARENT,

LinearLayout.LayoutParams.MATCH_PARENT, 1.0f);

addView(indicatorLayouts[i], llp);

final int currentStep = i;

indicatorLayouts[i].setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

// TODO 自动生成的方法存根

setCurrentStep(currentStep);

}

});

}

this.onStepChangeListener = onStepChangeListener;

for (int i = 0; i < stepCount; i++) {

setCurrentStep(i);

}

setCurrentStep(0);

}

public synchronized ImageView getIndicatorImageView(int step) {

return step >= 0 && step < indicatorImageViews.length ? indicatorImageViews[step]

: null;

}

public synchronized TextView getIndicatorTextView(int step) {

return step >= 0 && step < indicatorTextViews.length ? indicatorTextViews[step]

: null;

}

public synchronized int getCurrentStep() {

return currentStep;

}

public synchronized void setCurrentStep(int currentStep) {

if (this.currentStep == currentStep) {

return;

}

if (currentStep < 0) {

throw new IllegalArgumentException("currentStep < 0, currentStep="

+ currentStep);

}

if (currentStep >= indicatorLayouts.length) {

throw new IllegalArgumentException(

"currentStep >= stepCount, currentStep=" + currentStep

+ ", stepCount=" + indicatorLayouts.length);

}

if (onStepChangeListener != null) {

onStepChangeListener.onStepChange(currentStep, this.currentStep);

}

this.currentStep = currentStep;

if (Looper.myLooper() == Looper.getMainLooper()) {

invalidate();

} else {

postInvalidate();

}

}

public synchronized void setOnStepChangeListener(

OnStepChangeListener onStepChangeListener) {

this.onStepChangeListener = onStepChangeListener;

}

}

布局文件

<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:paddingBottom="@dimen/activity_vertical_margin"

android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

tools:context=".MainActivity" >

<com.zjg.smart.android.view.StepIndicator

android:id="@+id/test_stepIndicator"

android:layout_width="match_parent"

android:layout_height="24dp" >

</com.zjg.smart.android.view.StepIndicator>

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_below="@id/test_stepIndicator"

android:text="AA" />

</RelativeLayout>

MainActivity .java

package com.zjg.stepindicator;

import com.zjg.smart.android.view.StepIndicator;

import com.zjg.smart.android.view.StepIndicator.OnStepChangeListener;

import android.os.Bundle;

import android.app.Activity;

import android.view.Menu;

import android.widget.ImageView;

import android.widget.TextView;

import android.widget.ImageView.ScaleType;

public class MainActivity extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

final StepIndicator stepIndicator = (StepIndicator) findViewById(R.id.test_stepIndicator);

stepIndicator.initialize(8, new OnStepChangeListener() {

//监听步骤改变，当在步骤指示器上单击时就可改变步骤

@Override

public void onStepChange(int newStep, int oldStep) {

// TODO 自动生成的方法存根

ImageView oldIndicatorImageView = stepIndicator

.getIndicatorImageView(oldStep);

oldIndicatorImageView

.setImageResource(R.drawable.step_indicator);

oldIndicatorImageView.setScaleType(ScaleType.FIT_XY);

ImageView newIndicatorImageView = stepIndicator

.getIndicatorImageView(newStep);

newIndicatorImageView

.setImageResource(R.drawable.current_step_indicator);

newIndicatorImageView.setScaleType(ScaleType.FIT_XY);

TextView oldIndicatorTextView = stepIndicator

.getIndicatorTextView(oldStep);

oldIndicatorTextView.setText("" + oldStep);

TextView newIndicatorTextView = stepIndicator

.getIndicatorTextView(newStep);

newIndicatorTextView.setText("" + newStep);

}

});

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar if it is present.

getMenuInflater().inflate(R.menu.main, menu);

return true;

}

}

完整示例：http://download.csdn.net/detail/z13759561330/8669173

APK：http://download.csdn.net/detail/z13759561330/8669175