web-dev-qa-db-ja.com

材料設計ステッパー制御

Androidマテリアルデザインガイドのこちらに記載されている垂直方向の非線形ステッパーコントロールの実装を開始する方法を教えてください。

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

androidandroid-layoutmaterial-design
26
user248981

これを確認できます library ですが、これはまだ開発中です。

mobileStepperSimpleクラスを拡張し、init、onFinishedメソッドを実装するだけです。

stepperFragmentを拡張してステッパーをフラグメントとして追加し、onNextButtonHandlerを実装できます。次のボタンのクリックを処理します。

より多くの使用法については、 デモ を確認してください。

どんな貢献と最適化も役立ちます。

6
androidlover

サポートライブラリソリューションが存在しないため（まだ）、最近のプロジェクトでこれらのライブラリのいくつかを試しました。私のお気に入り（外観、滑らかさ、機能性）は このプロジェクト by "ernestoyaquello"でした。また、 My Fork にいくつかのオプションを追加しました。

これに注意する唯一のことは、「アダプター」クラスを使用せず、代わりにコールバックインターフェイスを使用することです。

Gitのデモ画面：

enter image description here

2
Nick Cardoso

まったく同じではありませんが、私の要件に従って、カスタムの垂直ステッパーを開発しました。以下は、デモ全体のソースコードです。

enter image description here

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>

リストの単一アイテム（raw.xmlファイルでステッパーの単一アイテムを設計）

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

    }

アダプタクラス

    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;
    }
2
P Trivedi