0

UI-Mockupに表示されるような行を含むListViewを実装する必要があります。

レイアウト

行のデータに応じて、さまざまな行レイアウトを処理することができました。問題は、表示されているタイムラインレイアウトを実装するためにどちらの方法を使用するかということです。余白を使用してマーカーとテキストをタイムラインの正しい位置に配置するRelativeLayoutsを使い始めましたが、リストをスクロールするときに多くの問題が発生します。TextViewsは常に絶対的に正しい位置にあるとは限りません。

これは、行のレイアウトの重要な部分です（長い青い線のある画像の2行目）：

<LinearLayout 
        android:id="@+id/progress"
        android:layout_height="50dp"
        android:layout_width="fill_parent"
        android:paddingBottom="10dp"
        android:paddingRight="10dp"
        android:layout_gravity="bottom">
        <RelativeLayout
            android:id="@+id/progressContainer"
            android:layout_height="fill_parent"
            android:layout_gravity="bottom"
            android:layout_width="0px"
            android:layout_weight="6"
            >
            <RelativeLayout
                android:id="@+id/blue"
                android:background="#FF33B5E5"
                android:layout_width="fill_parent"
                android:layout_height="7dp"
                android:layout_alignParentBottom="true"
                />

            <tv.px.android.play.widget.CustomImageView android:id="@+id/progressMarker"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/marker"
                android:layout_alignParentBottom="true"
                />
            <tv.px.android.play.widget.CustomTextView android:id="@+id/periodIndicator"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:singleLine="true"
                android:layout_above="@id/progressMarker"
                android:paddingBottom="2dp"
                />
        </RelativeLayout>
        <RelativeLayout 
            android:layout_height="fill_parent"
            android:layout_gravity="bottom"
            android:layout_weight="1"
            android:layout_width="0px"
            >
            <RelativeLayout
                android:id="@+id/red"
                android:background="@drawable/red_fadeout_linear_gradient"
                android:layout_alignParentBottom="true"
                android:layout_width="fill_parent"
                android:layout_height="7dp"
                />
            <TextView android:id="@+id/periodEndIndicator"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Sa"
                android:layout_above="@id/red"
                android:layout_alignParentLeft="true"
                android:paddingBottom="2dp"
                />
        </RelativeLayout>
    </LinearLayout>

CustomImageViewIでは、メソッドをオーバーライドしonMeasureて位置（leftMargin）を計算します。これは、適切に機能します。

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int width = MeasureSpec.getSize(widthMeasureSpec);

    int widthPerDay = width / daysTotal;
    int margin = (daysOver * widthPerDay) - getWidth()/2;

    ((RelativeLayout.LayoutParams) this.getLayoutParams()).leftMargin = margin;
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}

CustomTextView私も同じように試しましたが、結果が異なります。TextViewの幅が更新されないなど、アダプタのビューをリサイクルするときに問題があると思います。編集：parentWidthが行ごとに異なることがわかりました。

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    int parentWidth = MeasureSpec.getSize(widthMeasureSpec);

    int widthPerDay = parentWidth / daysTotal;
    int margin = (daysOver * widthPerDay) - getWidth() / 2;

    if (margin < 0) {
        margin = 0;
    }

    if (margin + getWidth() >= parentWidth) {
        margin = parentWidth - getWidth() - 10;
    }

    ((RelativeLayout.LayoutParams) this.getLayoutParams()).setMargins(margin, 0, 0, 0);
    this.requestLayout();
}

最後になりましたが、アダプタのgetView実装は次のとおりです。

@Override
    public View getView(int position, View convertView, ViewGroup parent) {

        ViewHolder holder;

        View v = convertView;

        TimeLineItem ci = getItem(position);

        if (v == null) {
            LayoutInflater vi;
            vi = LayoutInflater.from(getContext());
            holder = new ViewHolder();

            v = vi.inflate(R.layout.cleaning_list_item, null);

                holder.marker = (CustomImageView) v.findViewById(R.id.progressMarker);
                holder.periodIndicator = (CustomTextView) v.findViewById(R.id.periodIndicator);

            }

            v.setTag(holder);

        } else {
            holder = (ViewHolder) v.getTag();
        }

        if (ci != null) {

                int daysTotal = 6;
                int daysOver = ci.getTotal();
                // CustomTextView
                holder.periodIndicator.setDaysTotal(daysTotal);
                holder.periodIndicator.setDaysOver(daysOver);
                if (daysTotal - daysOver == 1) {
                    holder.periodIndicator.setText("in einem Tag");
                } else {
                    holder.periodIndicator.setText("in " + (daysTotal - daysOver) + " Tagen");
                }
                // CustomImageView
                holder.marker.setDaysTotal(daysTotal);
                holder.marker.setDaysOver(daysOver);
                holder.marker.requestLayout();


        }

        return v;

    }

したがって、最初の質問は、このような複雑なレイアウトを実装する正しい方法にあるのかということです。もしそうなら、私は何を間違っているのですか？CustomTextViewが正しく配置されていないのはなぜですか？

4

1 に答える 1

1

標準のウィジェットとレイアウトでカスタム表示を行うのが難しくなる場合は、Viewをサブクラス化してカスタムウィジェットを作成します。これを行うのは非常に簡単です。あなたの場合、onDrawカスタム表示を描画するためにオーバーライドする必要があるだけです。

于 2012-05-21T11:00:40.357 に答える