无法在相对和线性布局内对齐图像按钮

Question

我希望第一行有3个图像按钮，第二行有3个图像按钮。 我尝试使用相对和线性布局的组合实现它，但不知何故，我最终在每行中有1个图像按钮，总共6行。

有人可以帮我对齐第一行的3个图像框和第二行的3个图像框。

    <div ng-controller="testController" ng-init="init()">


        <div class="container" ng-show="createMenu">
            <br />
            <div class="row">
                <div class="col-sm-2">
                    <label class="control-label">test:</label>
                </div>
                <div class="col-sm-4 form-group">
                    <select name="testTypeSelect" ng-model="selectedtestType" ng-options="test.testTypeName for test in tests" ng-change="updateImageUrl(selectedtestType)">
                        <option value="">-- Select the test --</option>
                    </select>
                </div>
            </div>             
            <br />
            <div class="row">
                <div class="col-sm-2">
                    <label>Name :</label>
                </div>
                <div class="col-md-6 form-group">
                    <input type="text" maxlength="150" ng-model="testName" name="testName" />
                </div>
            </div>
            <br />

            <div class="row">
                <div class="form-group ">
                    <label class="form-group col-md-3">Language</label>
                    <label class="form-group col-md-4">Title</label>
                    <label class="form-group col-md-5"> Description</label>
                </div>
            </div>
            <div class="row">

                <div>
                    <div ng-repeat="Descriptions in testsWithDescription ">
                        <div class="form-group col-md-2 top-Margin-language">
                            <label ng-model="Descriptions.Language">{{Descriptions.Language}}</label>
                        </div>
                        <div class="form-group col-md-4 top-Margin-Title">
                            <input type="text" maxlength="150" input-md" name="titleValidate[]" ng-model="Descriptions.Title" />

                        </div>
                        <div class="form-group col-md-5">
                            <textarea maxlength="500" class="form-control input-md noresize" name="descriptionValidate[]" noresize ng-model="Descriptions.Description"></textarea>
                        </div>
                        <div class="form-group col-md-1">
                            <a style="cursor:pointer"><img ng-src="{{DeleteIcon_url}}" alt="delete image" ng-click="($index == !selectedDeleteIcon) || testsWithDescription.splice($index,1)" ng-class="{'disabled': $first}" /> </a>

                        </div>
                    </div>
                </div>
            </div>
            <br />
            <div class="row">
                <div class="col-lg-2 col-md-2 col-sm-2 ">
                    <label>Delivery Method</label>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2" ng-repeat="method in deliveryMethods">
                    <input type="checkbox" id="{{method.id}}"  
                           value="{{method.value}}" name="deliveryMethod[]" ng-model="method.selected"
                           ng-click="toggleSelection(method.value)" ng- ="value.length==0"> {{method.value}}
                </div>
            </div>
            <br />

                <div class="form-group">
                    <div class="col-sm-offset-4 col-sm-6">
                        <input type="submit" value="Submit" ng-click="add()" /> 
                        <input type="button" id="btnReset" value="Cancel" ng-click="reset()" />
                    </div>

Answer 1

试用此代码，

activity_main.xml：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    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">

    <LinearLayout
        android:id="@+id/lin1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="3">

        <ImageButton
            android:id="@+id/image1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:srcCompat="@drawable/star2" />

        <ImageButton
            android:id="@+id/image2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:srcCompat="@drawable/star1" />

        <ImageButton
            android:id="@+id/image3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:srcCompat="@drawable/star3" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/lin2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/lin1"
        android:orientation="horizontal"
        android:weightSum="3">

        <ImageButton
            android:id="@+id/image4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:srcCompat="@drawable/star2" />

        <ImageButton
            android:id="@+id/image5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:srcCompat="@drawable/star1" />

        <ImageButton
            android:id="@+id/image6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:srcCompat="@drawable/star3" />

    </LinearLayout>


</RelativeLayout>

特此，我附上截图，

希望它会对你有所帮助。