0
我正在使用RelativeLayout創建自定義視圖。經過幾天的努力，我不知道如何去做我想做的事。在Android中使用屬性合併自定義RelativeLayout
我需要類似時間線的東西。線，這是所有的圈子。我用一種XML創建了所有東西，只爲了在一個地方看到所有東西，並且它正在工作。
這就是我想實現：
what I want http://i59.tinypic.com/5cn4eb.png
，並有工作XML timeline_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RelativeLayout
android:id="@+id/test1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true">
<RelativeLayout
android:id="@+id/draw1"
android:layout_width="20dp"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/testText"
android:layout_alignParentStart="true"
android:layout_alignTop="@+id/testText"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp">
<View
android:id="@+id/lineUpDraw1"
android:layout_width="1dp"
android:layout_height="wrap_content"
android:layout_above="@+id/circleDraw1"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:background="@color/primary"
android:visibility="gone"/>
<View
android:id="@+id/circleDraw1"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="@drawable/circle"/>
<View
android:id="@+id/lineDownDraw1"
android:layout_width="1dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_below="@+id/circleDraw1"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:background="@color/primary"/>
</RelativeLayout>
<TextView
android:id="@+id/testText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:layout_marginStart="4dp"
android:layout_toEndOf="@+id/draw1"
android:text="TEST1"
android:textSize="16sp"/>
</RelativeLayout>
<RelativeLayout
android:id="@+id/test2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_below="@+id/test1">
<RelativeLayout
android:id="@+id/draw2"
android:layout_width="20dp"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/testText2"
android:layout_alignParentStart="true"
android:layout_alignTop="@+id/testText2"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp">
<View
android:id="@+id/lineUpDraw2"
android:layout_width="1dp"
android:layout_height="wrap_content"
android:layout_above="@+id/circleDraw2"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:background="@color/primary"/>
<View
android:id="@+id/circleDraw2"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="@drawable/circle"/>
<View
android:id="@+id/lineDownDraw2"
android:layout_width="1dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_below="@+id/circleDraw2"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:background="@color/primary"/>
</RelativeLayout>
<TextView
android:id="@+id/testText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:layout_marginStart="4dp"
android:layout_toEndOf="@+id/draw2"
android:text="TEST2"
android:textSize="16sp"/>
</RelativeLayout>
<RelativeLayout
android:id="@+id/test3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_below="@+id/test2">
<RelativeLayout
android:id="@+id/draw3"
android:layout_width="20dp"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/testText3"
android:layout_alignParentStart="true"
android:layout_alignTop="@+id/testText3"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp">
<View
android:id="@+id/lineUpDraw3"
android:layout_width="1dp"
android:layout_height="wrap_content"
android:layout_above="@+id/circleDraw3"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:background="@color/primary"/>
<View
android:id="@+id/circleDraw3"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="@drawable/circle"/>
<View
android:id="@+id/lineDownDraw3"
android:layout_width="1dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_below="@+id/circleDraw3"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:background="@color/primary"
android:visibility="gone"/>
</RelativeLayout>
<TextView
android:id="@+id/testText3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:layout_marginStart="4dp"
android:layout_toEndOf="@+id/draw3"
android:text="TEST3"
android:textSize="16sp"/>
</RelativeLayout>
</RelativeLayout>
，並繪製circle.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="@color/primary"/>
</shape>
運行良好，但我想獲得通用的可能性，重新使用這個線圓線元素。這是我試過
timeline_element.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="@+id/lineUp"
android:layout_width="1dp"
android:layout_height="wrap_content"
android:layout_above="@+id/circle"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:background="@color/primary"/>
<View
android:id="@+id/circle"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="@drawable/circle"/>
<View
android:id="@+id/lineDown"
android:layout_width="1dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_below="@+id/circle"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:background="@color/primary"/>
</RelativeLayout >
timeline http://i58.tinypic.com/2ed1oc6.png
TimelineElement.java
package com.example;
import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
import android.widget.RelativeLayout;
import com.example.R;
public class TimelineElement extends RelativeLayout{
public TimelineElement(Context context, AttributeSet attrs) {
super(context, attrs);
init(attrs);
}
private void init(AttributeSet attrs) {
View view = View.inflate(getContext(), R.layout.element_timeline, this);
View lineUp = view.findViewById(R.id.lineUp);
View circle = view.findViewById(R.id.circle);
View lineDown = view.findViewById(R.id.lineDown);
TypedArray a = getContext().getTheme().obtainStyledAttributes(
attrs,
R.styleable.TimelineElement,
0, 0);
try {
int overallWidth = a.getDimensionPixelSize(R.styleable.TimelineElement_overallWidth, 0);
setLayoutParams(new LayoutParams(overallWidth, ViewGroup.LayoutParams.WRAP_CONTENT));
int shape = a.getResourceId(R.styleable.TimelineElement_circle, R.drawable.circle);
int circleSize = a.getDimensionPixelSize(R.styleable.TimelineElement_circleSize, 0);
circle.setLayoutParams(new LayoutParams(circleSize, circleSize));
circle.setBackground(getContext().getResources().getDrawable(shape));
int lineColor = a.getColor(R.styleable.TimelineElement_lineColor, R.color.primary);
lineUp.setBackgroundColor(lineColor);
lineDown.setBackgroundColor(lineColor);
int type = a.getInt(R.styleable.TimelineElement_linesType, 0);
if(type == 1)
lineDown.setVisibility(View.GONE);
if(type == 2)
lineUp.setVisibility(View.GONE);
} finally {
a.recycle();
}
}
}
attrs.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="TimelineElement">
<attr name="lineColor" format="color" />
<attr name="circle" format="reference" />
<attr name="circleSize" format="dimension" />
<attr name="overallWidth" format="dimension" />
<attr name="linesType" format="enum">
<enum name="both" value="0"/>
<enum name="up" value="1"/>
<enum name="down" value="2"/>
</attr>
</declare-styleable>
</resources>
timeline_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:timeline="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RelativeLayout
android:id="@+id/test1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true">
<com.example.TimelineElement
style="@style/TimelineElementStyle"
android:id="@+id/draw1"
android:layout_alignBottom="@+id/testText"
android:layout_alignParentStart="true"
android:layout_alignTop="@+id/testText"
timeline:linesType="down"/>
<TextView
android:id="@+id/testText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:layout_marginStart="4dp"
android:layout_toEndOf="@+id/draw1"
android:text="TEST1"
android:textSize="16sp"/>
</RelativeLayout>
<RelativeLayout
android:id="@+id/test2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_below="@+id/test1">
<com.example.TimelineElement
style="@style/TimelineElementStyle"
android:id="@+id/draw2"
android:layout_alignBottom="@+id/testText2"
android:layout_alignParentStart="true"
android:layout_alignTop="@+id/testText2"/>
<TextView
android:id="@+id/testText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:layout_marginStart="4dp"
android:layout_toEndOf="@+id/draw2"
android:text="TEST2"
android:textSize="16sp"/>
</RelativeLayout>
<RelativeLayout
android:id="@+id/test3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_below="@+id/test2">
<com.example.TimelineElement
style="@style/TimelineElementStyle"
android:id="@+id/draw3"
android:layout_alignBottom="@+id/testText3"
android:layout_alignParentStart="true"
android:layout_alignTop="@+id/testText3"
timeline:linesType="up"/>
<TextView
android:id="@+id/testText3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:layout_marginStart="4dp"
android:layout_toEndOf="@+id/draw3"
android:text="TEST3"
android:textSize="16sp"/>
</RelativeLayout>
</RelativeLayout>
和styles.xml
<style name="TimelineElementStyle">
<item name="android:layout_width">20dp</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_marginEnd">8dp</item>
<item name="android:layout_marginStart">8dp</item>
<item name="circle">@drawable/circle</item>
<item name="circleSize">10dp</item>
<item name="lineColor">@color/primary</item>
<item name="linesType">both</item>
</style>
可惜結果並不像我想
result http://i61.tinypic.com/256dwls.png
我不知道什麼可能是錯的:(我也想在另一個上下文中使用它，這就是爲什麼我真的需要提取這條線沒有textview（它可以是另一個上下文中的任何其他）。
我希望你能幫助我！謝謝
你必須採取既圓元素和線元素在一個相對佈局和調整他們在你的XML中centerhorizontal，那麼它會工作。如果它是一個列表，那麼你必須製作一個不同的佈局，並用適配器擴充列表。 – Aakash
Circel和line在timeline_element.xml中的RelativeLayout中 –
嘗試移除行元素中的重心。 – Aakash