材料设计步进控制

Question

有人可以告诉我如何开始实现Android Material Design指南中描述的垂直非线性步进控制:

http://www.google.com/design/spec/components/steppers.html

Answer 1

你可以查看这个库,但是这仍在开发中.

只需扩展mobileStepperSimple类并实现init,onFinished方法.

您可以通过扩展stepperFragment并实现onNextButtonHandler来处理下一个按钮单击,从而将步进器添加为片段.

查看演示 以获取更多用法.

任何贡献和优化都会有所帮助.

Answer 2

嗯，不完全相同，但根据我的要求，我开发了定制的垂直步进器。下面是整个demo的源代码。

活动主文件

<?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>

列表的单个项目（在 raw.xml 文件中设计步进器的单个项目）

原始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>

主要活动

@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);

    }

适配器类

    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;
}
}

模型类

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;
    }