I am trying to set the width of the layout to "fill_parent" while having the height of the view just the same length, to make the layout a square.
我试图将布局的宽度设置为“fill_parent”,同时使视图的高度具有相同的长度,以使布局成为正方形。
Any suggestions will be appreciate, thanks in advance! :D
任何建议都会很感激,提前谢谢! :d
7 个解决方案
#1
46
With introduction of ConstraintLayout you don't have to write either a single line of code or use third-parties or rely on PercentFrameLayout
which were deprecated in 26.0.0.
通过引入ConstraintLayout,您不必编写单行代码或使用第三方或依赖于26.0.0中不推荐使用的PercentFrameLayout。
Here's the example of how to keep 1:1 aspect ratio for your layout using ConstraintLayout
:
以下是如何使用ConstraintLayout为布局保持1:1宽高比的示例:
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="0dp"
android:layout_marginStart="0dp"
android:layout_marginTop="0dp"
android:background="@android:color/black"
app:layout_constraintDimensionRatio="H,1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</FrameLayout>
</android.support.constraint.ConstraintLayout>
Or instead of editing your XML file, you can edit your layout directly in Layout Editor:
或者,您可以直接在布局编辑器中编辑布局,而不是编辑XML文件:
#2
19
In your build.gradle add:
在build.gradle中添加:
compile 'com.android.support:percent:23.1.1'
and in your layout.xml wrap whatever view or viewgroup you want to to follow a ratio inside a PercentFrameLayout where:
并在您的layout.xml中包装您想要遵循PercentFrameLayout内部比率的任何视图或视图组,其中:
android:layout_width="match_parent"
android:layout_height="wrap_content"
and then for the view or viewgroup you want to to follow a ratio replace android:layout_width and android:layout_height:
然后对于视图或视图组,你想要遵循一个比例替换android:layout_width和android:layout_height:
app:layout_aspectRatio="178%"
app:layout_widthPercent="100%"
and you have a view or viewgroup where the aspect ratio is 16:9 (1.78:1) with the width matching the parent and the height adjusted accordingly.
并且您有一个视图或视图组,其宽高比为16:9(1.78:1),宽度与父级匹配,相应地调整高度。
Note: It's important you remove the normal width and height properties. Lint will complain, but it'll work.
注意:删除正常的宽度和高度属性非常重要。 Lint会抱怨,但它会起作用。
#3
17
You might try initially setting the layout_height
to wrap_content
. But from there I think you have to go into code. Just to experiment, in your activity try something like:
您可以尝试将layout_height设置为wrap_content。但是从那里我认为你必须进入代码。只是为了实验,在你的活动中尝试类似:
@Override
public void onResume(){
super.onResume();
findViewById(R.id.squareView).getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
@Override public void onGlobalLayout() {
View squareView = findViewById(R.id.squareView);
LayoutParams layout = squareView.getLayoutParams();
layout.height = squareView.getWidth();
squareView.setLayoutParams(layout);
squareView.getViewTreeObserver().removeGlobalOnLayoutListener(this);
}
});
}
Where R.id.squareView
is the id
of the view in question. And note, this code is wrapped in the onGlobalLayout
call to ensure that squareView.getWidth()
has a meaningful value.
其中R.id.squareView是相关视图的id。请注意,此代码包含在onGlobalLayout调用中,以确保squareView.getWidth()具有有意义的值。
#4
3
I created a layout library for similiar use case. Feel free to use it.
我为类似的用例创建了一个布局库。随意使用它。
Installation
Add this to the top of the file
将其添加到文件的顶部
repositories {
maven {
url "http://dl.bintray.com/riteshakya037/maven"
}
}
dependencies {
compile 'com.ritesh:ratiolayout:1.0.0'
}
Usage
Define 'app' namespace on root view in your layout
在布局中的根视图上定义“app”命名空间
xmlns:app="http://schemas.android.com/apk/res-auto"
Include this library in your layout
在您的布局中包含此库
<com.ritesh.ratiolayout.RatioRelativeLayout
android:id="@+id/activity_main_ratio_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:fixed_attribute="WIDTH" // Fix one side of the layout
app:horizontal_ratio="2" // ratio of 2:3
app:vertical_ratio="3">
#5
0
LinearLayout ll = (LinearLayout)findViewById(R.id.LL);
int width = ll.getWidth();
LinearLayout.LayoutParams ll_params = new LinearLayout.LayoutParams(width, width);
ll.setLayoutParams(ll_params);
#6
0
final RelativeLayout rlMyList = findViewById(R.id.rlMyList);
rlMyList.postDelayed(new Runnable() {
@Override
public void run() {
int width = rlMyList.getWidth();
LayoutParams lp = (LayoutParams) rlMyList.getLayoutParams();
lp.width = width;
lp.height = (int) (width * 0.67);// in my case ratio 3:2
rlMyList.setLayoutParams(lp);
}
},500);
#7
-1
set height as fill_parent
, the width as wrap_content
将height设置为fill_parent,将width设置为wrap_content
and you fix the aspect ratio with android:adjustViewBounds="true"
并用android修改宽高比:adjustViewBounds =“true”
#1
46
With introduction of ConstraintLayout you don't have to write either a single line of code or use third-parties or rely on PercentFrameLayout
which were deprecated in 26.0.0.
通过引入ConstraintLayout,您不必编写单行代码或使用第三方或依赖于26.0.0中不推荐使用的PercentFrameLayout。
Here's the example of how to keep 1:1 aspect ratio for your layout using ConstraintLayout
:
以下是如何使用ConstraintLayout为布局保持1:1宽高比的示例:
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="0dp"
android:layout_marginStart="0dp"
android:layout_marginTop="0dp"
android:background="@android:color/black"
app:layout_constraintDimensionRatio="H,1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</FrameLayout>
</android.support.constraint.ConstraintLayout>
Or instead of editing your XML file, you can edit your layout directly in Layout Editor:
或者,您可以直接在布局编辑器中编辑布局,而不是编辑XML文件:
#2
19
In your build.gradle add:
在build.gradle中添加:
compile 'com.android.support:percent:23.1.1'
and in your layout.xml wrap whatever view or viewgroup you want to to follow a ratio inside a PercentFrameLayout where:
并在您的layout.xml中包装您想要遵循PercentFrameLayout内部比率的任何视图或视图组,其中:
android:layout_width="match_parent"
android:layout_height="wrap_content"
and then for the view or viewgroup you want to to follow a ratio replace android:layout_width and android:layout_height:
然后对于视图或视图组,你想要遵循一个比例替换android:layout_width和android:layout_height:
app:layout_aspectRatio="178%"
app:layout_widthPercent="100%"
and you have a view or viewgroup where the aspect ratio is 16:9 (1.78:1) with the width matching the parent and the height adjusted accordingly.
并且您有一个视图或视图组,其宽高比为16:9(1.78:1),宽度与父级匹配,相应地调整高度。
Note: It's important you remove the normal width and height properties. Lint will complain, but it'll work.
注意:删除正常的宽度和高度属性非常重要。 Lint会抱怨,但它会起作用。
#3
17
You might try initially setting the layout_height
to wrap_content
. But from there I think you have to go into code. Just to experiment, in your activity try something like:
您可以尝试将layout_height设置为wrap_content。但是从那里我认为你必须进入代码。只是为了实验,在你的活动中尝试类似:
@Override
public void onResume(){
super.onResume();
findViewById(R.id.squareView).getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
@Override public void onGlobalLayout() {
View squareView = findViewById(R.id.squareView);
LayoutParams layout = squareView.getLayoutParams();
layout.height = squareView.getWidth();
squareView.setLayoutParams(layout);
squareView.getViewTreeObserver().removeGlobalOnLayoutListener(this);
}
});
}
Where R.id.squareView
is the id
of the view in question. And note, this code is wrapped in the onGlobalLayout
call to ensure that squareView.getWidth()
has a meaningful value.
其中R.id.squareView是相关视图的id。请注意,此代码包含在onGlobalLayout调用中,以确保squareView.getWidth()具有有意义的值。
#4
3
I created a layout library for similiar use case. Feel free to use it.
我为类似的用例创建了一个布局库。随意使用它。
Installation
Add this to the top of the file
将其添加到文件的顶部
repositories {
maven {
url "http://dl.bintray.com/riteshakya037/maven"
}
}
dependencies {
compile 'com.ritesh:ratiolayout:1.0.0'
}
Usage
Define 'app' namespace on root view in your layout
在布局中的根视图上定义“app”命名空间
xmlns:app="http://schemas.android.com/apk/res-auto"
Include this library in your layout
在您的布局中包含此库
<com.ritesh.ratiolayout.RatioRelativeLayout
android:id="@+id/activity_main_ratio_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:fixed_attribute="WIDTH" // Fix one side of the layout
app:horizontal_ratio="2" // ratio of 2:3
app:vertical_ratio="3">
#5
0
LinearLayout ll = (LinearLayout)findViewById(R.id.LL);
int width = ll.getWidth();
LinearLayout.LayoutParams ll_params = new LinearLayout.LayoutParams(width, width);
ll.setLayoutParams(ll_params);
#6
0
final RelativeLayout rlMyList = findViewById(R.id.rlMyList);
rlMyList.postDelayed(new Runnable() {
@Override
public void run() {
int width = rlMyList.getWidth();
LayoutParams lp = (LayoutParams) rlMyList.getLayoutParams();
lp.width = width;
lp.height = (int) (width * 0.67);// in my case ratio 3:2
rlMyList.setLayoutParams(lp);
}
},500);
#7
-1
set height as fill_parent
, the width as wrap_content
将height设置为fill_parent,将width设置为wrap_content
and you fix the aspect ratio with android:adjustViewBounds="true"
并用android修改宽高比:adjustViewBounds =“true”