Question

我有一个活动，其中包含在时间轴中组织的活动。但它看起来很难看。

enter image description here

我想设计一个更漂亮的时间表，就像这个。 enter image description here

有没有简单的方法或库在元素之间画线，就像我的例子一样？

<ScrollView
    android:layout_marginTop="10dp"
    android:layout_marginLeft="10dp"
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/text_data"
    android:layout_above="@+id/button_trimite"
    android:id="@+id/scroll_timeline"
    android:layout_marginBottom="7dp"

    >
    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/timelineTable"

        >


    </TableLayout>
</ScrollView>

这是我的xml。但我的TableLayout是动态生成的，因为我需要对事件进行排序。

for (final Event e : events) {
        if(e.getDate().equals(dataComp)) {
            //tablerow with event entry
            final TableRow row = new TableRow(getActivity());

            row.setLayoutParams(new TableRow.LayoutParams(
                    TableRow.LayoutParams.MATCH_PARENT,
                    TableRow.LayoutParams.WRAP_CONTENT));

            if (indexForDrawable % 2 == 0)
                row.setBackgroundResource(R.drawable.marcaj_event_albastru);
            else
                row.setBackgroundResource(R.drawable.marcaj_event_portocaliu);

            TextView txtEvent = new TextView(getActivity());
            txtEvent.setText("    "+ e.getHour() +"-"+e.getType()+"-"+e.getTitle());
            txtEvent.setTextColor(Color.BLACK);
            txtEvent.setTextSize(TypedValue.COMPLEX_UNIT_DIP, trEvent);
            txtEvent.setTypeface(Typeface.create(tf, Typeface.BOLD));

            row.addView(txtEvent);
            row.setClickable(true);
            final String date = e.getDate(), hour = e.getHour(), title = e.getTitle(),
                    type = e.getType(), descriere = e.getDescriere();
            final int finalResource = resource;
            final int finalIndexForDrawable = indexForDrawable;
            row.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    row.setBackground(getActivity().getResources().getDrawable(finalResource));
                    showPopup2(date, hour, type, title, descriere, row, finalIndexForDrawable);
                }
            });


            timelineTable.addView(row, new TableLayout.LayoutParams(
                    TableLayout.LayoutParams.MATCH_PARENT,
                    TableLayout.LayoutParams.WRAP_CONTENT));
            indexForDrawable++;
        }
        else {
            //tablerow with date
            final TableRow row = new TableRow(getActivity());
            row.setLayoutParams(new TableRow.LayoutParams(
                    TableRow.LayoutParams.MATCH_PARENT,
                    TableRow.LayoutParams.WRAP_CONTENT));
            TextView txtEvent = new TextView(getActivity());

// txtEvent.setText（“\ n”+ dataSplit1 [0] + months.indexOf（dataSplit1 1））; txtEvent.setText（“\ n”+ e.getDate（）。substring（0,5））; txtEvent.setTextSize（TypedValue.COMPLEX_UNIT_DIP，trDate）; row.addView（txtEvent）; timelineTable.addView（row，new TableLayout.LayoutParams（ TableLayout.LayoutParams.MATCH_PARENT， TableLayout.LayoutParams.WRAP_CONTENT））; dataComp = e.getDate（）;

            //tablerow with event entry
            final TableRow row3 = new TableRow(getActivity());
            row3.setLayoutParams(new TableRow.LayoutParams(
                    TableRow.LayoutParams.MATCH_PARENT,
                    TableRow.LayoutParams.WRAP_CONTENT));

            if (indexForDrawable % 2 == 0)
                row3.setBackgroundResource(R.drawable.marcaj_event_albastru);
            else
                row3.setBackgroundResource(R.drawable.marcaj_event_portocaliu);
            TextView txtEvent3 = new TextView(getActivity());

            txtEvent3.setText("    "+ e.getHour() +"-"+e.getType()+"-"+e.getTitle());
            txtEvent3.setTextColor(Color.BLACK);
            txtEvent3.setTextSize(TypedValue.COMPLEX_UNIT_DIP, trEvent);
            txtEvent3.setTypeface(Typeface.create(tf, Typeface.BOLD));
            row3.addView(txtEvent3);
            row3.setClickable(true);
            final String date3 = e.getDate(), hour3 = e.getHour(), title3 = e.getTitle(),
                    type3 = e.getType(), descriere3 = e.getDescriere();

            timelineTable.addView(row3, new TableLayout.LayoutParams(
                    TableLayout.LayoutParams.MATCH_PARENT,
                    TableLayout.LayoutParams.WRAP_CONTENT));
            indexForDrawable++;
        }

Answer 1

您可能需要创建自己的自定义适配器，但我使用的是数组适配器供您参考。同时为列表视图提供项目布局，希望您相应地管理代码。

list-items

<强> items.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical" >

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent" >

        <View
            android:layout_width="2dp"
            android:layout_height="match_parent"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:background="@android:color/black" />

        <View
            android:id="@+id/view1"
            android:layout_width="7dp"
            android:layout_height="7dp"
            android:layout_centerVertical="true"
            android:layout_marginLeft="7dp"
            android:background="@drawable/dot" />
    </RelativeLayout>

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:padding="20dp"
        android:textAppearance="?android:attr/textAppearanceMedium" />

</LinearLayout>

dot.xml 这是一个可绘制的

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >

<stroke
    android:width="1dp"
    android:color="@android:color/black" />

<solid android:color="@android:color/white" />

在活动中你可以使用这样的适配器：

list.setAdapter(new ArrayAdapter<String>(this, R.layout.item, R.id.textView1, items));

希望这有帮助！

Answer 2

如果您只想显示一行，我建议您为此创建一个Drawable。下面是一个小例子：布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/line">

</LinearLayout>

和line.xml Drawable

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:left="3dp">
        <shape >
            <stroke android:width="1dp" android:color="@android:color/holo_purple"/>
        </shape>

    </item>
    <item android:left="4dp">
        <shape>
            <solid android:color="#ffffff"/>
        </shape>
    </item>

</layer-list>

也可以更改图层列表以使用其他Drawables作为您已使用的图纸。

使用draw-9的示例可能如下所示： line.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <nine-patch android:src="@drawable/point" android:dither="true"/>
    </item>

    <!-- <item android:left="3dp">
        <shape >
            <stroke android:width="1dp" android:color="@android:color/holo_purple"/>
        </shape>

    </item>
    <item android:left="4dp">
        <shape>
            <solid android:color="#ffffff"/>
        </shape>
    </item> -->

</layer-list>

布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="New Text"
        android:background="@drawable/line" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="New Text"
        android:background="@drawable/line"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="New Text"
        android:layout_gravity="center_horizontal"
        android:background="@drawable/line" />
</LinearLayout>

和我的point.9.png draw-9 point.9.png

要应用绘制九贴片，您必须在边框上标记要用黑色拉伸的部分。

在TableLayout Android中的两个元素之间绘制自定义行

2 个答案: