LinearLayoutをカスタマイズし、フローレイアウトを組み合わせて、ショッピングモールapp商品の規格選択Viewを実現
一：効果図鎮楼
二:View全体の制作過程
三:まずviewが受信したデータフォーマットを確定し、私がここで採用したのは大集合の中に小集合が入っていることです。
作成されたエンティティークラスは、ExpandableListViewを使用したデータソースフォーマットとあまり差がないのも理解しやすいです.
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);