Sophisticated button layout

huangapple go评论71阅读模式
英文:

Sophisticated button layout

问题

我试图在布局中央创建一个大按钮,左侧带有图像,四周有填充,然后垂直居中另外两个不同的文本视图。

这是我想要实现的效果:
Sophisticated button layout

我有点新手,非常感谢任何帮助 Sophisticated button layout

这是我当前的做法:

<FrameLayout
        android:id="@+id/buttonLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="20dp"
        android:background="@color/white">

        <Button
            android:id="@+id/requestButton"
            style="@style/request_button"
            android:drawableStart="@drawable/card_icon" />

        <Button
            android:id="@+id/requestTextView"
            style="@style/request_title_text_view"
            android:text="@string/cards_request" />

        <Button
            android:id="@+id/bodyTextView"
            style="@style/request_body_text_view"
            android:text="@string/cards_request_card" />

    </FrameLayout>

和样式:

<style name="request_title_text_view" parent="request_body_text_view">
    <item name="android:textSize">26sp</item>
    <item name="android:textStyle">bold</item>
    <item name="android:layout_marginTop">10dp</item>
</style>

<style name="request_body_text_view" parent="android:Widget.TextView">
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:textColor">@color/white</item>
    <item name="android:textSize">18sp</item>
    <item name="android:textAllCaps">true</item>
    <item name="android:paddingRight">20dp</item>
    <item name="android:paddingLeft">16dp</item>
    <item name="android:layout_marginTop">45dp</item>
    <item name="android:layout_marginLeft">80dp</item>
    <item name="android:elevation">10dp</item>
</style>

在这里将边距硬编码进样式中不是一个好做法,不知道是否有更好的方式?

英文:

Im trying to create a large button in the center of the layout, with an image on the left,
with padding on all sides, followed by another two different textviews centered vertically

This is what im trying to achieve:
Sophisticated button layout

Im kind of new and any help would be greatly appreciated Sophisticated button layout

This is how I do it currently:

&lt;FrameLayout
        android:id=&quot;@+id/buttonLayout&quot;
        android:layout_width=&quot;wrap_content&quot;
        android:layout_height=&quot;wrap_content&quot;
        android:layout_centerHorizontal=&quot;true&quot;
        android:layout_marginTop=&quot;20dp&quot;
        android:layout_marginBottom=&quot;20dp&quot;
        android:background=&quot;@color/white&quot;&gt;

        &lt;Button
            android:id=&quot;@+id/requestButton&quot;
            style=&quot;@style/request_button&quot;
            android:drawableStart=&quot;@drawable/card_icon&quot; /&gt;

        &lt;Button
            android:id=&quot;@+id/requestTextView&quot;
            style=&quot;@style/request_title_text_view&quot;
            android:text=&quot;@string/cards_request&quot;/&gt;

        &lt;Button
            android:id=&quot;@+id/bodyTextView&quot;
            style=&quot;@style/request_body_text_view&quot;
            android:text=&quot;@string/cards_request_card&quot; /&gt;

    &lt;/FrameLayout&gt;

And styles:

&lt;style name=&quot;request_title_text_view&quot; parent=&quot;request_body_text_view&quot;&gt;
    &lt;item name=&quot;android:textSize&quot;&gt;26sp&lt;/item&gt;
    &lt;item name=&quot;android:textStyle&quot;&gt;bold&lt;/item&gt;
    &lt;item name=&quot;android:layout_marginTop&quot;&gt;10dp&lt;/item&gt;
&lt;/style&gt;

&lt;style name=&quot;request_body_text_view&quot; parent=&quot;android:Widget.TextView&quot;&gt;
    &lt;item name=&quot;android:layout_width&quot;&gt;wrap_content&lt;/item&gt;
    &lt;item name=&quot;android:layout_height&quot;&gt;wrap_content&lt;/item&gt;
    &lt;item name=&quot;android:textColor&quot;&gt;@color/white&lt;/item&gt;
    &lt;item name=&quot;android:textSize&quot;&gt;18sp&lt;/item&gt;
    &lt;item name=&quot;android:textAllCaps&quot;&gt;true&lt;/item&gt;
    &lt;item name=&quot;android:paddingRight&quot;&gt;20dp&lt;/item&gt;
    &lt;item name=&quot;android:paddingLeft&quot;&gt;16dp&lt;/item&gt;
    &lt;item name=&quot;android:layout_marginTop&quot;&gt;45dp&lt;/item&gt;
    &lt;item name=&quot;android:layout_marginLeft&quot;&gt;80dp&lt;/item&gt;
    &lt;item name=&quot;android:elevation&quot;&gt;10dp&lt;/item&gt;
&lt;/style&gt;

Its just a bad practice to put those margins there hard-coded and was wondering if there is another better way?

答案1

得分: 1

以下是翻译好的内容:

可以尝试这样做:

    &lt;RelativeLayout
      &lt;ConstraintLayout 
          &lt;Button
          &lt;ImageView
          &lt;TextView
          &lt;TextView
      &lt;/ConstraintLayout
    &lt;/RelativeLayout
英文:

You can try this:

&lt;RelativeLayout
  &lt;ConstraintLayout 
      &lt;Button
      &lt;ImageView
      &lt;TextView
      &lt;TextView
  &lt;/ConstraintLayout
 &lt;/RelativeLayout

答案2

得分: 0

Sure, here is the translated code:

<RelativeLayout
    android:id="@+id/requestButton"
    android:layout_width="wrap_content"
    android:layout_height="88dp"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="20dp"
    android:layout_marginBottom="20dp"
    android:background="@drawable/button_background"
    android:padding="15dp">

    <ImageView
        android:id="@+id/iconImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginEnd="15dp"
        android:elevation="10dp"
        android:src="@drawable/cr_icon" />

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toEndOf="@id/iconImageView">

        <TextView
            android:id="@+id/requestTextView"
            style="@style/request_title_text_view"
            android:text="@string/cr_request" />

        <TextView
            android:id="@+id/bodyTextView"
            style="@style/request_body_text_view"
            android:layout_below="@+id/requestTextView"
            android:text="@string/cr_request_body" />

    </RelativeLayout>

</RelativeLayout>

Please note that this is the same code you provided, with the HTML escape codes (e.g., &lt; and &quot;) replaced with their respective characters in XML.

英文:
&lt;RelativeLayout
        android:id=&quot;@+id/requestButton&quot;
        android:layout_width=&quot;wrap_content&quot;
        android:layout_height=&quot;88dp&quot;
        android:layout_centerHorizontal=&quot;true&quot;
        android:layout_marginTop=&quot;20dp&quot;
        android:layout_marginBottom=&quot;20dp&quot;
        android:background=&quot;@drawable/button_background&quot;
        android:padding=&quot;15dp&quot;&gt;

        &lt;ImageView
            android:id=&quot;@+id/iconImageView&quot;
            android:layout_width=&quot;wrap_content&quot;
            android:layout_height=&quot;wrap_content&quot;
            android:layout_centerVertical=&quot;true&quot;
            android:layout_marginEnd=&quot;15dp&quot;
            android:elevation=&quot;10dp&quot;
            android:src=&quot;@drawable/cr_icon&quot; /&gt;

        &lt;RelativeLayout
            android:layout_width=&quot;wrap_content&quot;
            android:layout_height=&quot;wrap_content&quot;
            android:layout_centerVertical=&quot;true&quot;
            android:layout_toEndOf=&quot;@id/iconImageView&quot;&gt;

            &lt;TextView
                android:id=&quot;@+id/requestTextView&quot;
                style=&quot;@style/request_title_text_view&quot;
                android:text=&quot;@string/cr_request&quot; /&gt;

            &lt;TextView
                android:id=&quot;@+id/bodyTextView&quot;
                style=&quot;@style/request_body_text_view&quot;
                android:layout_below=&quot;@+id/requestTextView&quot;
                android:text=&quot;@string/cr_request_body&quot; /&gt;

        &lt;/RelativeLayout&gt;

    &lt;/RelativeLayout&gt;

huangapple
  • 本文由 发表于 2023年2月13日 22:48:08
  • 转载请务必保留本文链接:https://go.coder-hub.com/75437444.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定