LinearLayoutをカスタマイズし、フローレイアウトを組み合わせて、ショッピングモールapp商品の規格選択Viewを実現

一：効果図鎮楼

二:View全体の制作過程

三:まずviewが受信したデータフォーマットを確定し、私がここで採用したのは大集合の中に小集合が入っていることです。

public class BigClassification {
    //   
    private String title;
    public List<SmallClassification> list;

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public List<SmallClassification> getList() {
        return list;
    }

    public void setList(List<SmallClassification> list) {
        this.list = list;
    }

    //   
    public static class SmallClassification {
        private String name;

        public String getName() {
            return name;
        }

        public void setName(String name) {
            this.name = name;
        }
    }
}

四:データがあれば、私たちが設定したこれらの属性を展示することができます。まず、次のセクションを見てみましょう。各大規格のタイトルを表示します。つまり、newのTextViewを表示し、Viewに追加してコードを見てみましょう。

    /** *     */
    private List<BigClassification> list;
    /** *     */
    private Context context;

    /** *            */
    private int titleMargin = 8;
    /** *             */
    private int flowLayoutMargin = 16;
    /** *         */
    private int buttonHeight = 25;
    /** *            */
    private int buttonLeftMargin = 10;
    /** *            */
    private int buttonTopMargin = 8;
    /** *          */
    private int textPadding = 10;
    /** *          */
    private OnSelectedListener listener;

//       ，       
for (BigClassification attr : list) {
            //         
            TextView textView = new TextView(context);
            LayoutParams params = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT);
            //          dip         px(  )
            int margin = dip2px(context, titleMargin);
            // textView         
            textView.setText(attr.getTitle());
            params.setMargins(margin, margin, margin, margin);
            textView.setLayoutParams(params);
            addView(textView);
        }

五:大きなタイトルが表示されると、小さな規格ごとに表示が始まります。ここでは小さな規格の属性をFlowLayouに追加しました。

for (BigClassification attr : list) {
            //            
            //.....

            //              
            FlowLayout layout = new FlowLayout(context);
            //       
            layout.setTitle(attr.getTitle());
            layout.setPadding(dip2px(context, flowLayoutMargin), 0, dip2px(context, flowLayoutMargin), 0);
            //      
            if (listener != null) {
                layout.setListener(listener);
            }
            for (BigClassification.SmallClassification smallAttr : attr.getList()) {
                //    
                RadioButton button = new RadioButton(context);
                //       
                LayoutParams buttonParams = new LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,
                        dip2px(context, buttonHeight));
                //       
                int padding = dip2px(context, textPadding);
                button.setPadding(padding, 0, padding, 0);
                //  margin  ，   LayoutParams            
                MarginLayoutParams marginParams = new MarginLayoutParams(buttonParams);
                marginParams.leftMargin = dip2px(context, buttonLeftMargin);
                marginParams.topMargin = dip2px(context, buttonTopMargin);

                button.setLayoutParams(marginParams);
                button.setGravity(Gravity.CENTER);
                button.setBackgroundResource(R.drawable.tv_sel);
                button.setButtonDrawable(android.R.color.transparent);
                button.setText(smallAttr.getName());
                layout.addView(button);
            }
            addView(layout);
        }

1.最初はここを通ったsetMargins(); RadioButtonの上下左右の余白を設定していますが、運転してみるとまだ1つの塊に押し込まれていて全く効果がありません。突然FlowLayoutのソースコードをちらっと見てみると、彼はLayoutParamsをMarginLayoutParamsに強く変えたので、自然にこのようにMarginを設定するのは無効です。

2.MarginLayoutParamsパラメータを設定し、marginプロパティを設定する場合、LayoutParamsに入力する必要があります。そうしないと、既存のレイアウトパラメータが失われます。

MarginLayoutParams marginParams = new MarginLayoutParams(buttonParams);
marginParams.leftMargin = dip2px(context, buttonLeftMargin);
marginParams.topMargin = dip2px(context, buttonTopMargin);

3.RadioButtonを動的に追加し、前の円を取り除くには以下のように設定すればよい。

button.setButtonDrawable(android.R.color.transparent);

六:次に、選択したリスニングを設定し、FlowLayoutのaddView()関数を書き換えて、RadioButtonごとにリスニングイベントを設定します。

@Override
    public void addView(View child) {
        ((RadioButton) child).setOnCheckedChangeListener(this);
        super.addView(child);
    }

コールバックで選択したプロパティをコールバックします。これにより、選択したプロパティがわかります。

    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        for (int i = 0; i < getChildCount(); i++) {
            RadioButton button = (RadioButton) getChildAt(i);
            button.setChecked(false);
        }
        if (isChecked) {
            buttonView.setChecked(true);
            if (listener != null) {
                listener.onSelected(getTitle(), buttonView.getText().toString());
            }
        }

    }

ソース:完全なコードはここClick Meを見てください

七:ここで注意しなければならないのは、選択した結果のリスニングをsetDataの前に設定することです。

ShoppingSelectView view = (ShoppingSelectView) findViewById(R.id.v);
//             
view.setOnSelectedListener(this);
view.setData(list);

八：最后に书いても、実はみんなが想像していたほど难しくはありません。想像力と手の能力さえあれば、きっとあなたが望む効果を実现することができます。信じないなら、やってみてください。使い方は上のリンクをクリックすればいいので、何か問題があったらメッセージを歓迎します!