Comment puis-je réaliser ce type de mise en page sans utiliser de bibliothèque?
J'ai essayé quelque chose comme ça mais je n'ai pas pu obtenir le mise en page exacte
my_layout.xml
<?xml version="1.0" encoding="utf-8"?> <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:fromDegrees="90" android:toDegrees="90"> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line"> <stroke android:width="2dp" android:color="#ff0000" android:dashWidth="4dp" android:dashGap="4dp" /> </shape> </rotate>
dotted_line.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginTop="20dp" tools:context=".MainActivity"> <RelativeLayout android:background="@drawable/layout_border" android:layout_margin="20dp" android:padding="10dp" android:layout_width="match_parent" android:layout_height="match_parent"> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <ImageView android:id="@+id/iv_tick" android:layout_width="17dp" android:layout_height="17dp" android:layout_marginLeft="20dp" android:src="@drawable/tick" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignBaseline="@+id/iv_tick" android:layout_marginLeft="14dp" android:layout_marginRight="20dp" android:layout_toRightOf="@+id/iv_tick" android:lineSpacingExtra="6dp" android:text="This is my text. This is my text. This is my text. This is my text. " android:textColor="#000" android:textSize="16dp" /> <ImageView android:src="@drawable/dotted_line" android:foregroundGravity="left" android:layout_below="@+id/iv_tick" android:scaleType="fitXY" android:layout_width="match_parent" android:layout_height="match_parent"/> </RelativeLayout> <!--<com.example.myapplication.DividerView android:layout_width="wrap_content" android:layout_height="fill_parent" android:layerType="software" android:color="#ff0000" android:orientation="vertical" android:dashLength="5dp" android:dashGap="1dp" android:dashThickness="1dp" />--> </RelativeLayout> </RelativeLayout>
C'est le résultat que j'obtiens avec le code implémenté ci-dessus. Comment obtenir le résultat quelque chose comme l'image que j'ai publiée ci-dessus?
J'ai même essayé la mise en page de contraintes, mais aucune aide pour cela aussi.
3 Réponses :
1.Créez le fichier "/res/values/attrs.xml" avec le contenu suivant:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:custom="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <ImageView android:id="@+id/iv_tick" android:layout_width="40dp" android:layout_height="40dp" android:src="@drawable/right" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:text="Hello This Is My Text" /> </LinearLayout> <com.example.YOURPACKAGENAME.DividerView android:layout_width="40dp" android:layout_height="150dp" android:layerType="software" custom:color="#ff0000" custom:dashGap="2dp" custom:dashLength="6dp" custom:dashThickness="2dp" custom:orientation="vertical" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <ImageView android:layout_width="40dp" android:layout_height="40dp" android:src="@drawable/right" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:text="Hello This Is My Text" /> </LinearLayout> <com.example.YOURPACKAGENAME.DividerView android:layout_width="40dp" android:layout_height="60dp" android:layerType="software" custom:color="#ff0000" custom:dashGap="2dp" custom:dashLength="6dp" custom:dashThickness="2dp" custom:orientation="vertical" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <ImageView android:layout_width="40dp" android:layout_height="40dp" android:src="@drawable/right" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:text="Hello This Is My Text" /> </LinearLayout> <com.example.YOURPACKAGENAME.DividerView android:layout_width="40dp" android:layout_height="100dp" android:layerType="software" custom:color="#ff0000" custom:dashGap="2dp" custom:dashLength="6dp" custom:dashThickness="2dp" custom:orientation="vertical" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <ImageView android:layout_width="40dp" android:layout_height="40dp" android:src="@drawable/right" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:text="Hello This Is My Text" /> </LinearLayout>
2.Créez la classe DividerView avec le contenu ci-dessous:
XXX
Code XML comme celui-ci: -
public class DividerView extends View { static public int ORIENTATION_HORIZONTAL = 0; static public int ORIENTATION_VERTICAL = 1; private Paint mPaint; private int orientation; public DividerView(Context context, AttributeSet attrs) { super(context, attrs); int dashGap, dashLength, dashThickness; int color; TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.DividerView, 0, 0); try { dashGap = a.getDimensionPixelSize(R.styleable.DividerView_dashGap, 5); dashLength = a.getDimensionPixelSize(R.styleable.DividerView_dashLength, 5); dashThickness = a.getDimensionPixelSize(R.styleable.DividerView_dashThickness, 3); color = a.getColor(R.styleable.DividerView_color, 0xff000000); orientation = a.getInt(R.styleable.DividerView_orientation, ORIENTATION_HORIZONTAL); } finally { a.recycle(); } mPaint = new Paint(); mPaint.setAntiAlias(true); mPaint.setColor(color); mPaint.setStyle(Paint.Style.STROKE); mPaint.setStrokeWidth(dashThickness); mPaint.setPathEffect(new DashPathEffect(new float[] { dashLength, dashGap, }, 0)); } public DividerView(Context context) { this(context, null); } @Override protected void onDraw(Canvas canvas) { if (orientation == ORIENTATION_HORIZONTAL) { float center = getHeight() * .5f; canvas.drawLine(0, center, getWidth(), center, mPaint); } else { float center = getWidth() * .5f; canvas.drawLine(center, 0, center, getHeight(), mPaint); } } }
Capture d'écran
J'espère que cela pourra vous aider!
Merci.
Résultat:
Utilisez ceci:
<!--genaral spacing--> <dimen name="spacing_xsmall">2dp</dimen> <dimen name="spacing_small">3dp</dimen> <dimen name="spacing_medium">5dp</dimen> <dimen name="spacing_xmedium">7dp</dimen> <dimen name="spacing_middle">10dp</dimen> <dimen name="spacing_large">15dp</dimen> <dimen name="spacing_smlarge">18dp</dimen> <dimen name="spacing_mlarge">20dp</dimen> <dimen name="spacing_mxlarge">25dp</dimen> <dimen name="spacing_xlarge">35dp</dimen> <dimen name="spacing_xmlarge">40dp</dimen> <dimen name="spacing_xxlarge">50dp</dimen> <dimen name="spacing_xxxlarge">55dp</dimen> <dimen name="appbar_padding_top">8dp</dimen>
Créer un dessinable dans le nom du dossier dessinable drawable/shape_round_solid
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="@color/colorAccent" /> <size android:width="15dp" android:height="15dp" /> </shape>
Ajoutez ceci dimens.xml
<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/main_content" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/grey_5" android:fitsSystemWindows="true"> <android.support.v4.widget.NestedScrollView android:id="@+id/nested_scroll_view" android:layout_width="match_parent" android:layout_height="match_parent" android:scrollbars="none" android:scrollingCache="true" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:descendantFocusability="blocksDescendants" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <RelativeLayout android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_marginLeft="@dimen/spacing_smlarge" android:layout_marginStart="@dimen/spacing_smlarge" android:gravity="center_horizontal" android:orientation="vertical"> <View android:layout_width="1dp" android:layout_height="match_parent" android:layout_centerHorizontal="true" android:background="@color/grey_10" /> <ImageView android:layout_width="@dimen/spacing_middle" android:layout_height="@dimen/spacing_middle" android:layout_marginTop="@dimen/spacing_large" android:tint="#9CCC65" app:srcCompat="@drawable/shape_round_solid" /> </RelativeLayout> <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="@dimen/spacing_medium" android:layout_marginLeft="@dimen/spacing_middle" android:layout_marginRight="@dimen/spacing_middle" android:layout_marginTop="@dimen/spacing_middle" android:visibility="visible" app:cardCornerRadius="2dp" app:cardElevation="1dp"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="@dimen/spacing_medium" android:layout_marginLeft="@dimen/spacing_large" android:layout_marginRight="@dimen/spacing_large" android:layout_marginTop="@dimen/spacing_large" android:gravity="center_vertical" android:orientation="horizontal"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center_vertical" android:text="Taylor W " android:textAppearance="@style/TextAppearance.AppCompat.Caption" android:textColor="#000" android:textStyle="bold" /> </LinearLayout> </LinearLayout> </android.support.v7.widget.CardView> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <RelativeLayout android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_marginLeft="@dimen/spacing_smlarge" android:layout_marginStart="@dimen/spacing_smlarge" android:gravity="center_horizontal" android:orientation="vertical"> <View android:layout_width="1dp" android:layout_height="match_parent" android:layout_centerHorizontal="true" android:background="@color/grey_10" /> <ImageView android:layout_width="@dimen/spacing_middle" android:layout_height="@dimen/spacing_middle" android:layout_marginTop="@dimen/spacing_large" android:tint="#29B6F6" app:srcCompat="@drawable/shape_round_solid" /> </RelativeLayout> <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="@dimen/spacing_medium" android:layout_marginLeft="@dimen/spacing_middle" android:layout_marginRight="@dimen/spacing_middle" android:layout_marginTop="@dimen/spacing_middle" android:visibility="visible" app:cardCornerRadius="2dp" app:cardElevation="1dp"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="@dimen/spacing_medium" android:layout_marginLeft="@dimen/spacing_large" android:layout_marginRight="@dimen/spacing_large" android:layout_marginTop="@dimen/spacing_large" android:gravity="center_vertical" android:orientation="horizontal"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center_vertical" android:text="Taylor W " android:textAppearance="@style/TextAppearance.AppCompat.Caption" android:textColor="#000" android:textStyle="bold" /> </LinearLayout> </LinearLayout> </android.support.v7.widget.CardView> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <RelativeLayout android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_marginLeft="@dimen/spacing_smlarge" android:layout_marginStart="@dimen/spacing_smlarge" android:gravity="center_horizontal" android:orientation="vertical"> <View android:layout_width="1dp" android:layout_height="match_parent" android:layout_centerHorizontal="true" android:background="@color/grey_10" /> <ImageView android:layout_width="@dimen/spacing_middle" android:layout_height="@dimen/spacing_middle" android:layout_marginTop="@dimen/spacing_large" android:tint="#FF4081" app:srcCompat="@drawable/shape_round_solid" /> </RelativeLayout> <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="@dimen/spacing_medium" android:layout_marginLeft="@dimen/spacing_middle" android:layout_marginRight="@dimen/spacing_middle" android:layout_marginTop="@dimen/spacing_middle" android:visibility="visible" app:cardCornerRadius="2dp" app:cardElevation="1dp"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="@dimen/spacing_medium" android:layout_marginLeft="@dimen/spacing_large" android:layout_marginRight="@dimen/spacing_large" android:layout_marginTop="@dimen/spacing_large" android:gravity="center_vertical" android:orientation="horizontal"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center_vertical" android:text="Taylor W " android:textAppearance="@style/TextAppearance.AppCompat.Caption" android:textColor="#000" android:textStyle="bold" /> </LinearLayout> </LinearLayout> </android.support.v7.widget.CardView> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <RelativeLayout android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_marginLeft="@dimen/spacing_smlarge" android:layout_marginStart="@dimen/spacing_smlarge" android:gravity="center_horizontal" android:orientation="vertical"> <View android:layout_width="1dp" android:layout_height="match_parent" android:layout_centerHorizontal="true" android:background="@color/grey_10" /> <ImageView android:layout_width="@dimen/spacing_middle" android:layout_height="@dimen/spacing_middle" android:layout_marginTop="@dimen/spacing_large" android:tint="#F57F17" app:srcCompat="@drawable/shape_round_solid" /> </RelativeLayout> <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="@dimen/spacing_medium" android:layout_marginLeft="@dimen/spacing_middle" android:layout_marginRight="@dimen/spacing_middle" android:layout_marginTop="@dimen/spacing_middle" android:visibility="visible" app:cardCornerRadius="2dp" app:cardElevation="1dp"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="@dimen/spacing_medium" android:layout_marginLeft="@dimen/spacing_large" android:layout_marginRight="@dimen/spacing_large" android:layout_marginTop="@dimen/spacing_large" android:gravity="center_vertical" android:orientation="horizontal"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center_vertical" android:text="Taylor W " android:textAppearance="@style/TextAppearance.AppCompat.Caption" android:textColor="#000" android:textStyle="bold" /> </LinearLayout> </LinearLayout> </android.support.v7.widget.CardView> </LinearLayout> </LinearLayout> </android.support.v4.widget.NestedScrollView> </android.support.design.widget.CoordinatorLayout>
J'espère que cela fonctionnera pour tous.
Une autre façon d'implémenter les lignes pointillées.
Les lignes pointillées horizontales et verticales dans Android à l'aide de formes.
<rotate xmlns:android="http://schemas.android.com/apk/res/android" android:fromDegrees="90" android:toDegrees="90" android:drawable="@drawable/horizontal_line"/>
(OR)
<rotate xmlns:android="http://schemas.android.com/apk/res/android" android:fromDegrees="90" android:toDegrees="90" > <shape android:shape="line" > <stroke android:dashGap="6px" android:dashWidth="6px" android:color="#C7B299" /> </shape> </rotate>
Que diriez-vous d'utiliser StepView ou VerticalStepperForm
stackoverflow.com/q/14581602/7666442
Cela peut vous aider,
SO
link stackoverflow.com/questions/44936373/… et un autre lien de bibliothèque github.com/vipulasri/Timeline-View