问题
Could someone give me an idea how to begin implementing vertical, non-linear stepper control described in the Android Material Design guide here:
http://www.google.com/design/spec/components/steppers.html
回答1:
you can check this library , however this is still in development.
just extend the mobileStepperSimple class and implement the methods init,onFinished.
you can add the steppers as fragments by extending the stepperFragment and implement onNextButtonHandler to handle next button click.
check the demo for more usage.
any contributions and optimization will be helpful.
回答2:
Because no Support Library solution exists (still) I have tried several of these libraries in a recent project. My favourite (for appearance, smoothness and functionality) was This Project by "ernestoyaquello". I also added some options to it on My Fork.
The only thing to note with this, is that it does not use an 'adapter' class but instead uses a callback interface.
Demo Screen from Git:
回答3:
Well not exactly the same but as per my requirement, I developed custom VERTICAL STEPPER. Below is the source code of whole demo.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ListView
android:id="@+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="10dp"
android:divider="@android:color/transparent"
android:dividerHeight="0dp"/>
</LinearLayout>
Single Item for List(Design your single item of your stepper in raw.xml file)
raw.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="25dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/iv_upper_line"
android:layout_width="wrap_content"
android:layout_height="20dp"
app:srcCompat="@drawable/order_status_line" />
<ImageView
android:id="@+id/iv_circle"
android:layout_width="30dp"
android:layout_height="30dp"
app:srcCompat="@drawable/circle_o" />
<ImageView
android:id="@+id/iv_lower_line"
android:layout_width="wrap_content"
android:layout_height="20dp"
app:srcCompat="@drawable/order_status_line" />
</LinearLayout>
<LinearLayout
android:id="@+id/ly_status"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="@+id/tv_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="Order Rcived"
android:layout_gravity="left"
android:textSize="18sp"
android:textStyle="bold" />
<LinearLayout
android:id="@+id/ly_orderstatus_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical|top"
android:orientation="horizontal">
<ImageView
android:id="@+id/imageview"
android:layout_width="20dp"
android:layout_height="20dp"
app:srcCompat="@drawable/ic_restore_black" />
<TextView
android:id="@+id/tv_orderstatus_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical|top"
android:text="8:30am,Jan 31,2018"
android:textSize="18sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
MainActivity
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
orderStatusList();
}
private void orderStatusList() {
ArrayList<OrderStatusModel> arrayOfStatus =OrderStatusModel.getStoreDetail();
OrderStatusAdapter adapter = new OrderStatusAdapter(this, arrayOfStatus);
ListView listView = (ListView) findViewById(R.id.list);
listView.setAdapter(adapter);
}
Adapter Class
class OrderStatusAdapter extends ArrayAdapter<OrderStatusModel> {
Context context;
ArrayList<OrderStatusModel> order_status;
boolean isOn = false;
public OrderStatusAdapter(Contextcontext,ArrayList<OrderStatusModel>order_status{super(context, 0, order_status);
this.context = context;
this.order_status = order_status;
}
@Override
public View getView(final int position, View convertView, ViewGroup parent) {
// Check if an existing view is being reused, otherwise inflate the view if(convertView==null)convertView=LayoutInflater.from(getContext()).inflate(R.layout.raw,parent,false);
}
// Get the data item for this position
OrderStatusModel order_status_data = getItem(position);
// Lookup view for data population
ImageView iv_upper_line = (ImageView)
convertView.findViewById(R.id.iv_upper_line);
ImageView iv_lower_line =(ImageView)
convertView.findViewById(R.id.iv_lower_line);
final ImageView iv_circle = (ImageView) convertView.findViewById(R.id.iv_circle);
TextView tv_status = (TextView) convertView.findViewById(R.id.tv_status);
TextView tv_orderstatus_time =(TextView)
convertView.findViewById(R.id.tv_orderstatus_time);
LinearLayout ly_orderstatus_time = (LinearLayout)
convertView.findViewById(R.id.ly_orderstatus_time);
LinearLayout ly_status = (LinearLayout) convertView.findViewById(R.id.ly_status);
// Populate the data into the template view using the data object
tv_status.setText(order_status_data.getTv_status());
tv_orderstatus_time.setText(order_status_data.getTv_orderstatus_time());
if(position == 0){
iv_upper_line.setVisibility(View.INVISIBLE);
}
else if (position == order_status.size()-1){
iv_lower_line.setVisibility(View.INVISIBLE);
ly_orderstatus_time.setVisibility(View.GONE);
}
convertView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
iv_circle.setBackgroundResource(R.drawable.bullseye);
Toast.makeText(context, "You Clicked at
item"position,Toast.LENGTH_SHORT).show();
}
});
// Return the completed view to render on screen
return convertView;
}
}
Model Class
private String tv_status;
private String tv_orderstatus_time;
public OrderStatusModel(String tv_status, String tv_orderstatus_time) {
this.tv_status = tv_status;
this.tv_orderstatus_time = tv_orderstatus_time;
}
public String getTv_status() {
return tv_status;
}
public void setTv_status(String tv_status) {
this.tv_status = tv_status;
}
public String getTv_orderstatus_time() {
return tv_orderstatus_time;
}
public void setTv_orderstatus_time(String tv_orderstatus_time) {
this.tv_orderstatus_time = tv_orderstatus_time;
}
public static ArrayList<OrderStatusModel> getStoreDetail() {
ArrayList<OrderStatusModel> status = new ArrayList<OrderStatusModel>();
status.add(new OrderStatusModel("Order Rcived", "8:30am,Jan 31,2018"));
status.add(new OrderStatusModel("On The Way", "10:30am,Jan 31,2018"));
status.add(new OrderStatusModel("Delivered", "aaaaaa"));
return status;
}
来源：https://stackoverflow.com/questions/33439423/material-design-stepper-control