alx
@alx
MobApp Developer

Как сверстать подобный макет?

84b35d96d2864893b15a5ac9d9e467dc.png
Со всем справился, кроме изображения. Нужно, чтобы оно:
  • занимало фиксированный размер, а то, что выходит за него, скрывалось (аналог background cover в html),
  • выступало за края основного блока (аналог отрицательного marging в html).

Буду благодарен за подсказки.

Уточнение: сверстать нужно нативно в приложении под Android.
  • Вопрос задан
  • 1318 просмотров
Пригласить эксперта
Ответы на вопрос 5
@bot8
Android noob
d6055785cb734be9b704740eb77a003f.png
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="#D4D7DC"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center_horizontal">
    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="30dp">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="dark"
            android:layout_marginTop="20dp"
            android:layout_marginLeft="10dp"
            android:layout_marginBottom="20dp"
            android:text="Какой-то текст..."
            android:textSize="17dp"/>
    </android.support.v7.widget.CardView>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="250dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:weightSum="100">
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:layout_marginBottom="-6dp"
            android:layout_marginTop="-6dp"
            android:src="@drawable/Desert" />
    </LinearLayout>
    <android.support.v7.widget.CardView
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="dark"
            android:layout_marginTop="20dp"
            android:layout_marginLeft="10dp"
            android:layout_marginBottom="20dp"
            android:text="Какой-то Другой текст..."
            android:textSize="17dp"/>
    </android.support.v7.widget.CardView>
</LinearLayout>
Ответ написан
mitaichik
@mitaichik
Посмтори в сторону android:scaleType, там вроде что-то было подобное
Ответ написан
@naivekook
у тебя должно быть так

<android.support.v7.widget.CardView
   <LinearLayout>
       <TextView/>
       <ImageView/>
       <TextView/>
   </LinearLayout>
</android.support.v7.widget.CardView>
Ответ написан
alx
@alx Автор вопроса
MobApp Developer
От решения с двумя CardView, предложенного выше, пришлось отказаться, т.к. на мой взгляд это противоречит самой концепции CardView ("одна карточка - один CardView"). Поэтому заменил их на RelativeLayout и задал отступы примерно следующим образом:

<LinearLayout>
    <RelativeLayout
        ...
        android:layout_marginStart="10dp"
        android:layout_marginEnd="10dp">
        <TextView />
        <TextView />
    </RelativeLayout>
    <ImageView />
    <RelativeLayout
        ...
        android:layout_marginStart="10dp"
        android:layout_marginEnd="10dp">
        <TextView />
        <TextView />
    </RelativeLayout>
</LinearLayout>


Теперь думаю, как правильно приподнять картинку и отбросить тень. Пробую так:

<ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="fitCenter"
        android:elevation="2dp"
        android:background="@drawable/image_bg"/>


где

<!-- res/drawable/image_bg.xml -->
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke android:width="2dip" android:color="#4e4e4e" />
</shape>

Но результат не тот.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы