web-dev-qa-db-fra.com

Contrôle pas à pas de la conception des matériaux

Quelqu'un pourrait-il me donner une idée de la façon de commencer à implémenter le contrôle pas à pas vertical et non linéaire décrit dans le Android guide de conception de matériaux ici:

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

androidandroid-layoutmaterial-design
26
user248981

vous pouvez vérifier cela bibliothèque , mais cela est encore en développement.

étendez simplement la classe mobileStepperSimple et implémentez les méthodes init, onFinished.

vous pouvez ajouter les steppers sous forme de fragments en étendant le stepperFragment et implémentez onNextButtonHandler pour gérer le clic suivant sur le bouton.

consultez la démo pour plus d'utilisation.

toute contribution et optimisation seront utiles.

6
androidlover

Puisqu'aucune solution de bibliothèque de support n'existe (encore), j'ai essayé plusieurs de ces bibliothèques dans un projet récent. Mon préféré (pour l'apparence, la douceur et la fonctionnalité) était Ce projet par "ernestoyaquello". Je lui ai également ajouté quelques options sur My Fork .

La seule chose à noter avec cela, c'est qu'il n'utilise pas de classe 'adaptateur' mais utilise plutôt une interface de rappel.

Écran de démonstration de Git:

enter image description here

2
Nick Cardoso

Eh bien pas exactement la même chose, mais selon mes besoins, j'ai développé un VERTICAL STEPPER personnalisé. Ci-dessous, le code source de la démo entière.

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>

Élément unique pour la liste (Concevez votre élément unique de votre stepper dans un fichier 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);

    }

Classe d'adaptateur 

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

Classe de modèle 

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