Увеличьте ширину вида влево и вправо - PullRequest
Новая
       11

Увеличьте ширину вида влево и вправо

0 голосов
/ 22 ноября 2018

У меня есть следующий макет: 

<android.support.constraint.ConstraintLayout
    android:id="@+id/target"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    android:background="#FF0000"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:gravity="center"
        android:text="Hello"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/left_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="LEFT VIEW"
        android:visibility="gone"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/right_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="RIGHT VIEW"
        android:visibility="gone"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

<Button
    android:id="@+id/left_btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="8dp"
    android:text="LEFT"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/right_btn"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/target" />

<Button
    android:id="@+id/right_btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="8dp"
    android:text="RIGHT"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/left_btn"
    app:layout_constraintTop_toBottomOf="@+id/target" />

В результате чего: result_layout

Это фрагмент: 

public class IncreaseWidthLeftRightFragment extends Fragment {
    private IncreaseWidthLeftRightViewModel mViewModel;
    private TextView mRightView;
    private Button mLeftBtn;
    private Button mRightBtn;
    private TextView mLeftView;
    private ConstraintLayout mTarget;

    public static IncreaseWidthLeftRightFragment newInstance() {
        return new IncreaseWidthLeftRightFragment();
    }

    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container,
                             @Nullable Bundle savedInstanceState) {
        View v = inflater.inflate(R.layout.increase_width_left_right_fragment, container, false);
        mRightView = v.findViewById(R.id.right_view);
        mLeftBtn = v.findViewById(R.id.left_btn);
        mLeftBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showLeftText();
            }
        });
        mRightBtn = v.findViewById(R.id.right_btn);
        mRightBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showRightText();
            }
        });
        mLeftView = v.findViewById(R.id.left_view);
        mTarget = v.findViewById(R.id.target);
        return v;
    }

    private void showLeftText() {
        // increase the left side of the target container
        // ...
        mLeftView.setVisibility(View.VISIBLE);
    }

    private void showRightText() {
        // increase the right side of the target container
        // ...
        mRightView.setVisibility(View.VISIBLE);
    }
}

TextViews left_view и right_view изначально установлены на видимость GONE.Левая кнопка должна показывать left_view при расширении левой стороны, но правая сторона должна оставаться в том же месте.Аналогично для правой стороны, но в противоположном направлении.

Как мне этого добиться?Я пытался играть с LayoutParams, но безуспешно.Я хотел бы сделать это с анимацией, но это будет следующим шагом.

ОБНОВЛЕНИЕ:

Просто чтобы было понятно, например, если я нажму налевая кнопка, это должен быть конечный результат:

end_result

Как видите, правая сторона красного прямоугольника находится в той же координате XОднако ширина прямоугольника увеличивается влево.

1 Ответ

0 голосов
/ 24 ноября 2018

Если вам нужно, чтобы ваш целевой вид был привязан к текстовым представлениям, они не должны быть внутри него (предположим, что вы хотите использовать ConstraintLayout).Сами текстовые представления также должны иметь некоторую привязку к макету, чтобы они могли расширяться в зависимости от его положения.

1) Добавить рекомендации

Для этой цели вы можете использовать рекомендации по ограничениям .Например, если вы хотите, чтобы текстовые представления (и, следовательно, представление цели) расширялись с 32% от левого и правого краев корневого экрана, вы можете добавить рекомендации следующим образом (они должны быть на том же уровне иерархии, что и ваши кнопки / представление цели): 

<android.support.constraint.Guideline
    android:id="@+id/left_guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.32" />

<android.support.constraint.Guideline
    android:id="@+id/right_guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.68" />

PS * layout_constraintGuide_percent всегда вычисляется с левой стороны вида, внутри которого находится направляющая

2) Выровняйте текстовые представления

Как я уже говорил выше, текстовые представления должны находиться на одном уровне с целевым представлением, поэтому возьмите их изнутри целевого представления и поместите где-нибудь в макет корневого ограничения так, чтобы правый вид находился справа от правильной направляющей илевый вид слева от левого: 

<TextView
    android:id="@+id/left_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:singleLine="true"
    android:text="LEFT VIEW"
    app:layout_constraintEnd_toStartOf="@+id/left_guideline" />

<TextView
    android:id="@+id/right_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="RIGHT VIEW"
    app:layout_constraintStart_toStartOf="@+id/right_guideline" />

Нам также необходимо установить вертикальное ограничение для видов и создать ощущение, что они находятся внутри целевого вида.Для этого нам нужно выровнять верхнюю сторону обоих текстовых представлений с верхней стороной целевого представления.В дополнение к этому, исходное состояние текстовых представлений должно быть «свернуто» (чтобы они были скрыты), к сожалению, я не знаю, как сделать их шириной 0dp, так как такое значение для layout_width или layout_height делаетмакет ограничения предполагает, что представление просто соответствует ограничениям, а не использует свой собственный размер.В качестве быстрого обходного пути давайте установим ширину 1px.Чтобы текстовые представления не расширялись по вертикали, я также хотел бы предложить установить для них свойство singleLine на true. 

<TextView
    android:id="@+id/left_view"
    <b>android:singleLine="true"
    android:layout_width="1px"</b>
    android:layout_height="wrap_content"
    android:text="LEFT VIEW"
    app:layout_constraintEnd_toStartOf="@+id/left_guideline"
    <b>app:layout_constraintTop_toTopOf="@+id/target"</b> />

<TextView
    android:id="@+id/right_view"
    <b>android:singleLine="true"
    android:layout_width="1px"</b>
    android:layout_height="wrap_content"
    android:text="RIGHT VIEW"
    app:layout_constraintStart_toStartOf="@+id/right_guideline"
    <b>app:layout_constraintTop_toTopOf="@+id/target"</b> />

3). Выровнять целевое представление

Теперь простовыровняйте целевой вид слева и справа по левому и правому краю левого и правого текстового представления соответственно (чтобы он выровнялся с внешними границами обоих текстовых представлений) и установите для атрибута layout_width значение 0dp, чтобы оно следовалоограничения вместо простых значений. 

<android.support.constraint.ConstraintLayout
    android:id="@+id/target"
    <b>android:layout_width="0dp"</b>
    android:layout_height="200dp"
    android:background="#FF0000"
    app:layout_constraintBottom_toBottomOf="parent"
    <b>app:layout_constraintEnd_toEndOf="@+id/right_view"
    app:layout_constraintStart_toStartOf="@+id/left_view"</b>
    app:layout_constraintTop_toTopOf="parent">

4) Добавить идентификатор корневого макета

Чтобы получить корневой макет для анимации, добавьте идентификатор для корневого макета: 

<android.support.constraint.ConstraintLayout 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"
    <b>android:id="@+id/rootView"</b>
    android:layout_width="match_parent"
    android:layout_height="match_parent">

После всех шагов ваш макет должен выглядеть следующим образом:

Layout blueprint

Если вы боретесь на любом этапе, не стесняйтесь использовать полный макетСуть от здесь .

5) Расширение Animate

В конце концов ваш метод показа должен выглядеть примерно так: 

...
private void showLeftText() {
    expandView(mLeftView);
}

private void showRightText() {
    expandView(mRightView);
}

private void expandView(View view) {
    TransitionManager.beginDelayedTransition(mRootView);
    ViewGroup.LayoutParams layoutParams = view.getLayoutParams();
    layoutParams.width = ViewGroup.LayoutParams.WRAP_CONTENT;
    view.setLayoutParams(layoutParams);
}

И здеськороткая демка:

Animation

...