简单组合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