Question

我在GridLayout内有四个名为com.app.views.deals.DealsTabletButton的观点：

<android.support.v4.widget.SwipeRefreshLayout
    android:id="@+id/swipeRefreshLayout"
    android:layout_width="wrap_content"
    android:layout_height="match_parent">
        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent">
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">

                    <com.app.views.InfoHeading
                        android:layout_width="match_parent"
                        android:layout_height="@dimen/info_header_height"
                        android:layout_marginBottom="10dp"
                        android:layout_marginRight="10dp"
                        android:layout_marginTop="10dp"
                        android:background="@drawable/border_gray_solid_white" />

                    <RelativeLayout
                        android:layout_width="match_parent"
                        android:layout_height="250dp"
                        android:layout_marginRight="10dp">
                    <!-- ViewPager Implemenatation -->
                    </RelativeLayout>

                    <android.support.v7.widget.GridLayout
                        android:id="@+id/deals_container"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_marginTop="10dp"
                        app:alignmentMode="alignBounds"
                        app:columnCount="2">


                        <com.app.views.deals.DealsTabletButton
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            app:d_icon="@drawable/deals_icon_red"
                            app:d_lower_text="@string/all_deals_right_active_now"
                            app:d_text="@string/deals"
                            app:d_upper_text="@string/view" />

                        <com.app.views.deals.DealsTabletButton
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="2dp"
                            app:d_icon="@drawable/categories_icon_red"
                            app:d_lower_text="@string/over_500_top_categories"
                            app:d_text="@string/category"
                            app:d_upper_text="@string/shop_by" />


                        <com.app.views.deals.DealsTabletButton
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="2dp"
                            app:d_icon="@drawable/brands_icon_red"
                            app:d_lower_text="@string/over_2500_popular_brands"
                            app:d_text="@string/brand"
                            app:d_upper_text="@string/shop_by" />

                        <com.app.views.deals.DealsTabletButton
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="2dp"
                            android:layout_marginTop="2dp"
                            app:d_is_empty="true" />

                    </android.support.v7.widget.GridLayout>

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginBottom="@dimen/default_margin"
                        android:layout_marginRight="@dimen/default_margin"
                        android:layout_marginTop="@dimen/home_screen_sector_spacing"
                        android:orientation="horizontal">

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:gravity="left"
                            android:text="@string/best_seller"
                            android:textColor="@color/heading_gray"
                            android:textSize="14sp"
                            android:textStyle="bold" />


                        <TextView
                            android:id="@+id/all_best_sellers"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:gravity="right"
                            android:textColor="@color/hyper_link"
                            android:textSize="14sp" />
                    </LinearLayout>
                    <!-- Others views -->

    </ScrollView>
</android.support.v4.widget.SwipeRefreshLayout>

有DealsTabletButton布局：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/container"
    android:background="@drawable/border_gray_solid_white"
    android:orientation="horizontal"
    android:paddingBottom="10dp"
    android:paddingTop="10dp"
    android:paddingLeft="30dp"
    android:paddingRight="30dp"
    >

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

        <com.app.opticsplanet.views.SvgImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginTop="15dp"
            android:id="@+id/icon"
            app:b_icon="@drawable/deals_icon_red" />

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

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="View"
                android:id="@+id/upperText"
                android:textColor="@color/black"
                android:textSize="15sp" />

            <TextView
                android:id="@id/text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="DEALS"
                android:textAllCaps="true"
                android:textColor="@color/black"
                android:textSize="30sp" />

            <TextView
                android:id="@+id/lowerText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="All Deals Active Right Now!"
                android:textColor="@color/heading_gray"
                android:textSize="15sp" />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

和DealsTableButton实施：

public class DealsTabletButton extends FrameLayout {

    private final String upperText;
    private final String lowerText;
    private final String text;
    @InjectView(R.id.icon)
    SvgImageView mIcon;
    @InjectView(R.id.upperText)
    TextView mUpperText;
    @InjectView(R.id.text)
    TextView mText;
    @InjectView(R.id.lowerText)
    TextView mLowerText;
    @InjectView(R.id.container)
    LinearLayout mContainer;
    private Drawable icon;
    boolean isEmpty = false;

    public DealsTabletButton(Context context, AttributeSet attrs) {
        super(context, attrs);

        TypedArray ta = context.obtainStyledAttributes(attrs,
                R.styleable.deals_button, 0, 0);

        try {
            int iconId = ta.getResourceId(R.styleable.deals_button_d_icon, -1);
            upperText = ta.getString(R.styleable.deals_button_d_upper_text);
            lowerText = ta.getString(R.styleable.deals_button_d_lower_text);
            text = ta.getString(R.styleable.deals_button_d_text);
            isEmpty = ta.getBoolean(R.styleable.deals_button_d_is_empty, false);
            if (iconId != -1) {
                icon = ResourcesCompat.getDrawable(this.getContext(), iconId);

            }

        } finally {
            ta.recycle();
        }

        LayoutInflater mInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View view = mInflater.inflate(R.layout.deals_tablet_button, this, true);
        ButterKnife.inject(this, view);

        if (isEmpty) setEmptyView();
        else setViews();

    }

    private void setEmptyView() {
        mIcon.setImage(getContext().getResources().getDrawable(R.drawable.add_icon));
        mUpperText.setText(getContext().getResources().getString(R.string.add_your));
        mText.setText(getContext().getResources().getString(R.string.shortcut));
        mLowerText.setText(getContext().getResources().getString(R.string.to_specific_Department_Category_or_Brand));
        mContainer.setBackground(getContext().getResources().getDrawable(R.drawable.border_gray_solid_background_nop));
    }

    private void setViews() {
        if (icon != null) {
            mIcon.setImage(icon);
        }
        mText.setText(text);
        mLowerText.setText(lowerText + "\n");
        mUpperText.setText(upperText);
    }

}

纵向模式下的实际结果是：

红色箭头表示预期结果。如何在DealsTabletButton内正确排列这些GridLayout？

在屏幕旋转到横向模式后，我希望将所有视图放在一行中，并且有我的实现：

@Override
public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    if (newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE) {
        changeColumnCount(4);
        mDealsContainer.setRowCount(1);
    } else {
        changeColumnCount(2);
        mDealsContainer.setRowCount(2);
    }
}

private void changeColumnCount(int columnCount) {
    if (mDealsContainer.getColumnCount() != columnCount) {
        final int viewsCount = mDealsContainer.getChildCount();
        for (int i = 0; i < viewsCount; i++) {
            View view = mDealsContainer.getChildAt(i);
            //new GridLayout.LayoutParams created with Spec.UNSPECIFIED
            //which are package visible
            view.setLayoutParams(new GridLayout.LayoutParams());
        }
        mDealsContainer.setColumnCount(columnCount);
    }
}

结果是：

问题

在纵向模式下，我想拉伸视图到红线。

在横向模式下，我想将缩小视图缩小到红线。

希望我的问题很清楚，无论如何，谢谢！

Answer 1

要拉伸视图，请将android:layout_gravity="fill_horizontal"添加到单元格中。

要缩小视图范围，最好的办法是减少单元格视图中内容的宽度。您也可以尝试使用加权视图。权重仅在API 21之后受支持，但您可以使用支持库中的GridLayout：

        <android.support.v7.widget.GridLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:grid="http://schemas.android.com/apk/res-auto"
            .
            .
            .

            <com.app.views.deals.DealsTabletButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                grid:layout_gravity="fill_horizontal"
                grid:layout_rowWeight="1"
                .
                .
                .

适当地适合GridLayout中的视图

1 个答案: