拉伸图像以填满整个屏幕的25%

时间:2016-07-07 13:03:44

标签: android layout imageview

我在活动布局中有4张图片。我希望每个人都能使每一张照片都占据屏幕的25%。

我的意思是屏幕将在中间水平分成两部分。上面的每个部分都将垂直分成另外两个部分,所以最终,我将有4个偶数部分,每个部分都会包含一张照片。

这是我的代码:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.*****">

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="10dp">

    <LinearLayout
        android:layout_width="348dp"
        android:layout_height="fill_parent"
        android:orientation="horizontal"
        android:paddingBottom="10dp">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#fff"
            android:gravity="center_horizontal"
            android:orientation="vertical">

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/aImg"
                    android:src="@mipmap/ic_a"/>

            </RelativeLayout>

        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#fff"
            android:gravity="center_horizontal"
            android:orientation="vertical">

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/bImg"
                    android:src="@mipmap/ic_b"/>

            </RelativeLayout>

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:gravity="bottom"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#fff"
        android:gravity="center_horizontal"
        android:orientation="vertical">

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/cImg"
                android:src="@mipmap/ic_c"/>

        </RelativeLayout>

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#fff"
        android:gravity="center_horizontal"
        android:orientation="vertical">

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/dImg"
                android:src="@mipmap/ic_d"/>

        </RelativeLayout>

    </LinearLayout>

</LinearLayout>

那么,我怎样才能制作它并将屏幕分成4个偶数部分?

P.S。我的问题不重复,因为我想知道如何横向划分屏幕 垂直

7 个答案:

答案 0 :(得分:1)

由于您尚未接受任何答案,请试试此

活动XML:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="slashg.com.squaregridapplication.MainActivity">

    <GridLayout
        android:id="@+id/gl_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:columnCount="2"
        android:rowCount="2"/>
</RelativeLayout>

MainActivity.java

public class MainActivity extends AppCompatActivity
{

    int screenWidth;
    int squareImageWidth;
    GridLayout container;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        screenWidth = getWindowManager().getDefaultDisplay().getWidth();            // A very old method I used once in an old app
        squareImageWidth = screenWidth / 2;


        View.OnClickListener listener = new View.OnClickListener(){                 // You may want to init different listeners for different items
            @Override
            public void onClick(View v)
            {
                // TODO Add your listener code here
            }
        };


        container = (GridLayout) findViewById(R.id.gl_container);

        container.addView(getSquareImageView(R.drawable.image, squareImageWidth, listener));
        container.addView(getSquareImageView(R.drawable.image, squareImageWidth, listener));
        container.addView(getSquareImageView(R.drawable.image, squareImageWidth, listener));
        container.addView(getSquareImageView(R.drawable.image, squareImageWidth, listener));

    }

    protected ImageView getSquareImageView(@DrawableRes int image, int width, View.OnClickListener listener)
    {
        ImageView result = new ImageView(this);
        result.setLayoutParams(new ViewGroup.LayoutParams(width, width));
        result.setScaleType(ImageView.ScaleType.CENTER_CROP);                        // Or some other ScaleType depending on your need
        result.setImageResource(image);
        result.setClickable(true);       // To allow click events on the ImageView
        result.setOnClickListener(listener);
        return result;
    }

}

我已尝试过此代码,即使在非常旧的手机上也适用于我。截图: Screenshot from Samsung S7262

答案 1 :(得分:0)

尝试使用PercentRelativeLayout:

<android.support.percent.PercentRelativeLayout
    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">

   <ImageView
       app:layout_widthPercent="25%"
       app:layout_heightPercent="25%"/>

   <!-- More image views -->

</android.support.percent.PercentRelativeLayout>

请参阅文档:https://developer.android.com/reference/android/support/percent/PercentRelativeLayout.html

答案 2 :(得分:0)

尝试

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:src="@mipmap/ic_launcher"/>
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:src="@mipmap/ic_launcher"/>

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:src="@mipmap/ic_launcher"/>
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:src="@mipmap/ic_launcher"/>


        </LinearLayout>

    </LinearLayout>

</RelativeLayout>

答案 3 :(得分:0)

你使用weight_sum   parent linearlayout weight_sum = 4
子视图layout_weight = 1 layout_weight = 1
 示例代码         

    <receiver android:name=".ConnectionBroadReceiver">

答案 4 :(得分:0)

点击此链接创建自定义gridview http://www.rogcg.com/blog/2013/11/01/gridview-with-auto-resized-images-on-android

要实现这一点,您必须将gridView项目布局(在您的情况下为gridview_item.xml)的最小高度设置为(屏幕高度)/ 2,其中2是(您必须填充的行数)。可以在您使用的适配器中设置此最小高度。在内部活动之后添加此代码以获取屏幕大小。

     v = inflater.inflate(R.layout.gridview_item, viewGroup, false);
     v.setMinimumHeight(MainActivity .height/6);

然后在适配器类中添加此

@

//公开所有变量,以便您可以访问它。试试看,如果您有任何问题,请告诉我。

答案 5 :(得分:0)

使用Layout_weights均匀分布布局

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="2">

   <LinearLayout
   android:layout_width="wrap_content"
   android:layout_height="0dp"
   android:layout_weight="1"
   android:weightSum="2"
   android:orientation="horizontal"
   >

      <ImageView
      android:layout_width="0dp"
      android:layout_height="match_parent"
      android:layout_weight="1"/>


      <ImageView
      android:layout_width="0dp"
      android:layout_height="match_parent"
      android:layout_weight="1"/>

 </LinearLayout>


 <LinearLayout
 android:layout_width="wrap_content"
 android:layout_height="0dp"
 android:layout_weight="1"
 android:weightSum="2"
 android:orientation="horizontal"
 >

  <ImageView
  android:layout_width="0dp"
  android:layout_height="match_parent"
  android:layout_weight="1"/>


  <ImageView
  android:layout_width="0dp"
  android:layout_height="match_parent"
  android:layout_weight="1"/>

 </LinearLayout>

</LinearLayout>

答案 6 :(得分:0)

最好的选择,因为你不想滚动,使用GridLayout作为父布局,里面放置ImageViews:

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/GridLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="2"
android:rowCount="2"
android:orientation="horizontal"
tools:context=".GridXMLActivity" >

<!--image view 1-->
<!--image view 2-->
<!--image view 3--> 
<!--image view 4-->   
</GridLayout>

请参阅: http://www.techotopia.com/index.php/Working_with_the_Android_GridLayout_in_XML_Layout_Resources