FlexboxLayout，带有带背景图片的按钮，如何保持其大小 [英] FlexboxLayout with Buttons with Background Images, how to maintain their size

问题描述

这是我的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: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.FlexboxLayoutandroid:layout_width ="match_parent"android:layout_height ="match_parent"app:flexDirection ="column">< com.google.android.flexbox.FlexboxLayoutandroid:layout_width ="match_parent"android:layout_height ="wrap_content"app:flexDirection ="row"app:layout_flexBasisPercent ="25％">< com.google.android.flexbox.FlexboxLayoutandroid:layout_width ="match_parent"android:layout_height ="wrap_content"app:flexDirection ="column"app:layout_flexBasisPercent ="50％"><按钮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"/><按钮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><按钮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>< LinearLayoutandroid:layout_width ="match_parent"android:layout_height ="wrap_content"android:weightSum ="10"android:orientation ="vertical"app:layout_flexGrow ="1"><按钮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"/><按钮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"/><按钮android:id ="@ + id/podcast"android:layout_width ="match_parent"android:layout_height ="0dp"android:background ="@ android:color/holo_blue_dark"android:text =播放音乐"android:textColor ="@ android:color/white"android:layout_weight ="2"/></LinearLayout></com.google.android.flexbox.FlexboxLayout></com.google.android.flexbox.FlexboxLayout> 

如您所见，我从互联网上拍摄了一张背景图片，目前没有什么特别之处

好，现在我要使用上面xml中的配色方案中定义的给定高度和宽度，使主屏幕看起来像这样:

XML:

 <?xml version ="1.0" encoding ="utf-8"?>< com.google.android.flexbox.FlexboxLayoutxmlns: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.FlexboxLayoutandroid:layout_width ="match_parent"android:layout_height ="match_parent"app:flexDirection ="column">< com.google.android.flexbox.FlexboxLayoutandroid:layout_width ="match_parent"android:layout_height ="wrap_content"app:alignItems ="stretch"app:flexDirection ="row"app:layout_flexBasisPercent ="25％">< com.google.android.flexbox.FlexboxLayoutandroid:layout_width ="match_parent"android:layout_height ="0dp"app:flexDirection ="column"app:flexWrap ="nowrap"app:layout_flexBasisPercent ="50％"><按钮android:id ="@ + id/istilldontknow"android:layout_width ="wrap_content"android:layout_height ="match_parent"android:background ="@ android:color/holo_green_dark"android:text =我还是不知道"android:textColor ="@ android:color/white"/><按钮android:id ="@ + id/istilldontknow1"android:layout_width ="wrap_content"android:layout_height ="match_parent"android:background ="@ android:color/holo_green_light"android:text =我还是不知道"android:textColor ="@ android:color/white"/></com.google.android.flexbox.FlexboxLayout><按钮android:id ="@ + id/istilldontknow11"android:layout_width ="match_parent"android:layout_height ="0dp"android:background ="@ android:color/holo_orange_light"android:text =我还是不知道"android:textColor ="@ android:color/white"app:layout_flexBasisPercent ="50％"/></com.google.android.flexbox.FlexboxLayout>< LinearLayoutandroid:layout_width ="match_parent"android:layout_height ="wrap_content"android:orientation ="vertical"android:weightSum ="10"app:layout_flexGrow ="1"><按钮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"/><按钮android:id ="@ + id/checkin"android:layout_width ="match_parent"android:layout_height ="0dp"android:layout_weight ="4"android:background ="@ drawable/nav_bg"android:text =签入"android:textColor ="@ android:color/white"/><按钮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 =播放音乐"android:textColor ="@ android:color/white"/></LinearLayout></com.google.android.flexbox.FlexboxLayout></com.google.android.flexbox.FlexboxLayout> 

this is my XML File:

<?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>

As you can see I got a Background Image which is taken from the Internet, nothing special at this point

Good, now I want to make my Homescreen look like this with the given heights and widths I have defined in the color scheme in the xml above: Main Activity

As you can see in the PS File, there is a TextLayer with the Text Design, and a Layer which contains the Background of the Button with a complex Background (pay attention to "Play some music" with the Wave-Form in the Background plus the individual elements on the button itself).

So far so good, I tried the easiest way first, export the image to -png, put it in my Drawables and then set my "android:background=" to the button. This is the result: Button with Background

As you can see here, the image doesn't fit the way I want it and also the text gets a bad scale.

So I tried to create .9.png file which contains the Text and the Background Layer but the scaling looks awful because I only can stretch my Image in certain areas not containing any text or pattern.

How should I proceed?

解决方案

Just replace android:layout_height="wrap_content" of the required Button with android:layout_height="0dp" and it'll result something like this.

Image:

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>

这篇关于FlexboxLayout，带有带背景图片的按钮，如何保持其大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！