您的位置: 首页  >  技术问答  >  FlexboxLayout与背景图像按钮，如何保持其大小

FlexboxLayout与背景图像按钮，如何保持其大小

分类: 技术问答 • 2022-05-30 12:56:19
问题描述：

，这是我的XML文件：FlexboxLayout与背景图像按钮，如何保持其大小

<?xml version="1.0" encoding="utf-8"?> 

<com.google.android.flexbox.FlexboxLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:background="@drawable/main_bg" 
    android:orientation="vertical" 
    app:alignContent="stretch" 
    app:alignItems="stretch" 
    app:flexWrap="wrap" 
    android:id="@+id/activity_main" 
    > 


<com.google.android.flexbox.FlexboxLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    app:flexDirection="column" 

    > 

    <com.google.android.flexbox.FlexboxLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     app:flexDirection="row" 
     app:layout_flexBasisPercent="25%" 
     > 
    <com.google.android.flexbox.FlexboxLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     app:flexDirection="column" 
     app:layout_flexBasisPercent="50%" 

     > 

     <Button 
      android:id="@+id/istilldontknow" 
      android:layout_width="wrap_content" 
      android:layout_height="match_parent" 
      android:background="@android:color/holo_green_dark" 
      android:text="istilldontknow" 
      android:textColor="@android:color/white" 
      /> 

     <Button 
      android:id="@+id/istilldontknow" 
      android:layout_width="wrap_content" 
      android:layout_height="match_parent" 
      android:background="@android:color/holo_green_light" 
      android:text="@string/istilldontknow" 
      android:textColor="@android:color/white" 
      /> 
    </com.google.android.flexbox.FlexboxLayout> 



    <Button 
     android:id="@+id/istilldontknow" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="@android:color/holo_orange_light" 
     android:text="@string/istilldontknow" 
     android:textColor="@android:color/white" 
     app:layout_flexBasisPercent="50%" 
     /> 

    </com.google.android.flexbox.FlexboxLayout> 



<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:weightSum="10" 
    android:orientation="vertical" 
    app:layout_flexGrow="1" 
    > 


    <Button 
     android:id="@+id/events" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="@android:color/holo_blue_bright" 
     android:text="@string/Event" 
     android:textColor="@android:color/white" 
     android:layout_weight="4"/> 

    <Button 
     android:id="@+id/checkin" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="@android:color/holo_purple" 
     android:text="@string/checkin" 
     android:textColor="@android:color/white" 
     android:layout_weight="4"/> 


    <Button 
     android:id="@+id/podcast" 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:background="@android:color/holo_blue_dark" 
     android:text="Play some Music" 
     android:textColor="@android:color/white" 
     android:layout_weight="2" 

     /> 



</LinearLayout> 

</com.google.android.flexbox.FlexboxLayout> 

</com.google.android.flexbox.FlexboxLayout>

正如你看到的我是从网上取一个背景图像，没有什么特别的，在这一点上

好，现在我想让我的主屏幕看起来像这样与我在配色方案在上面的XML定义的给定的高度和宽度： Main Activity

正如你可以在PS文件中看到，有一个TextLayer与文本设计，以及一个包含具有复杂背景的按钮背景的图层（请注意“背景中的波形”以及按钮上的各个元素“播放某些音乐”）。

到目前为止，我首先尝试了最简单的方法，将图像导出到-png，将其放入我的Drawable中，然后将我的“android：background =”设置为按钮。这是结果： Button with Background

正如你在这里看到的，图像不符合我想要的方式，而且文本的尺寸也不好。

所以我试图创建包含文本和背景层的.9.png文件，但缩放看起来很糟糕，因为我只能在不包含任何文本或模式的特定区域拉伸我的图像。

我该如何继续？

答

只需用android:layout_height="0dp"替换android:layout_height="wrap_content"所需的Button，它会产生类似的结果。

图片：
enter image description here

XML：

<?xml version="1.0" encoding="utf-8"?> 
<com.google.android.flexbox.FlexboxLayout 
xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:app="http://schemas.android.com/apk/res-auto" 
android:id="@+id/activity_main" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:orientation="vertical" 
app:alignContent="stretch" 
app:alignItems="stretch" 
app:flexWrap="wrap"> 


<com.google.android.flexbox.FlexboxLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    app:flexDirection="column"> 

    <com.google.android.flexbox.FlexboxLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     app:alignItems="stretch" 
     app:flexDirection="row" 
     app:layout_flexBasisPercent="25%"> 

     <com.google.android.flexbox.FlexboxLayout 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      app:flexDirection="column" 
      app:flexWrap="nowrap" 
      app:layout_flexBasisPercent="50%"> 

      <Button 
       android:id="@+id/istilldontknow" 
       android:layout_width="wrap_content" 
       android:layout_height="match_parent" 
       android:background="@android:color/holo_green_dark" 
       android:text="i still dont know" 
       android:textColor="@android:color/white" /> 

      <Button 
       android:id="@+id/istilldontknow1" 
       android:layout_width="wrap_content" 
       android:layout_height="match_parent" 
       android:background="@android:color/holo_green_light" 
       android:text="i still dont know" 
       android:textColor="@android:color/white" /> 
     </com.google.android.flexbox.FlexboxLayout> 


     <Button 
      android:id="@+id/istilldontknow11" 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:background="@android:color/holo_orange_light" 
      android:text="i still dont know" 
      android:textColor="@android:color/white" 
      app:layout_flexBasisPercent="50%" /> 

    </com.google.android.flexbox.FlexboxLayout> 


    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:orientation="vertical" 
     android:weightSum="10" 
     app:layout_flexGrow="1"> 


     <Button 
      android:id="@+id/events" 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:layout_weight="4" 
      android:background="@drawable/nav_bg" 
      android:text="EVENT" 
      android:textColor="@android:color/white" /> 

     <Button 
      android:id="@+id/checkin" 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:layout_weight="4" 
      android:background="@drawable/nav_bg" 
      android:text="CHECK IN" 
      android:textColor="@android:color/white" /> 


     <Button 
      android:id="@+id/podcast" 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:layout_weight="2" 
      android:background="@drawable/nav_bg" 
      android:scaleType="centerCrop" 
      android:text="Play some Music" 
      android:textColor="@android:color/white" 

      /> 


    </LinearLayout> 

</com.google.android.flexbox.FlexboxLayout> 

</com.google.android.flexbox.FlexboxLayout>

相关推荐