重叠两个圆形图像视图

Question

我正在进行以下设计：

我在 android 中使用了以下代码来实现它：

1.activity_welcome.xml

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bg"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="@dimen/margin40"
        android:text="Welcome to Almachat"
        android:textColor="#ffffff"
        android:textSize="20dp" />

    <com.almabay.almachat.circularImageView.CircularImageView
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_marginLeft="210dp"
        android:background="@drawable/color" />
    <com.almabay.almachat.circularImageView.CircularImageView
        android:id="@+id/profilePic"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="center"
        android:layout_marginTop="-50dp" />

    <TextView
        android:id="@+id/txtName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textColor="#ffffff"
        android:textSize="30dp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/txtSomeText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Some static text will be here"
        android:textColor="#ffffff"
        android:textSize="20dp" />

    <Button
        android:id="@+id/btnContinue"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="@dimen/margin20"
        android:background="#F7AE21"
        android:padding="@dimen/padding20"
        android:text="Continue"
        android:textColor="#ffffff" />
</LinearLayout>

2。 colors.xml

    <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <gradient
        android:angle="270"
        android:endColor="#F7AE21"
        android:startColor="#F7AE21" />
    <stroke
        android:width="10dp"
        android:color="#F7AE21"></stroke>
</shape>

3.WelcomeActivity.java

    package com.almabay.almachat.activity;

import android.app.Activity;
import android.content.Context;
import android.content.SharedPreferences;
import android.media.Image;
import android.os.Bundle;
import android.util.Log;
import android.widget.ImageView;
import android.widget.TextView;

import com.almabay.almachat.R;
import com.almabay.almachat.bean.Bean_LoginDetails;
import com.almabay.almachat.sharedPreference.Prefs_Registration;
import com.squareup.picasso.Picasso;

/**
 * Created by deepakr on 1/29/2016.
 */
public class WelcomeActivity extends Activity {
    ImageView imgProfilePic;
    TextView txtName;
    String name, thumbnailURL;
    SharedPreferences preferences;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_welcome);

        //findViewById
        imgProfilePic = (ImageView) findViewById(R.id.profilePic);
        txtName = (TextView) findViewById(R.id.txtName);

        //initialization
        preferences = getApplicationContext().getSharedPreferences(Prefs_Registration.prefsName, Context.MODE_PRIVATE);

        //Getting values form Shared Preferences
        name = preferences.getString(Prefs_Registration.get_user_name,null);
        Log.e("Name", name);
        thumbnailURL = preferences.getString(Prefs_Registration.get_user_thumbnail,null);
        Log.e("thumbnail URL",thumbnailURL);
        // Loading thumbnailURL into circular image view using Picasso
        Picasso.with(WelcomeActivity.this).load(thumbnailURL).into(imgProfilePic);
        txtName.setText(name);

    }
}

使用上述代码后，我得到以下设计：

我的问题是具有橙色的圆形图像视图应该在具有个人资料图片的圆形图像视图上方。但是这里的个人资料图片在具有橙色的图像视图上方color.How我可以修复它吗？

Answer 1

我觉得这很容易。

只需切换 xml 中的 CircularImageViews。

所以

<com.almabay.almachat.circularImageView.CircularImageView
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:layout_marginLeft="210dp"
    android:background="@drawable/color" />
<com.almabay.almachat.circularImageView.CircularImageView
    android:id="@+id/profilePic"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:layout_gravity="center"
    android:layout_marginTop="-50dp" />

变成

<com.almabay.almachat.circularImageView.CircularImageView
    android:id="@+id/profilePic"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:layout_gravity="center"
    android:layout_marginTop="-50dp" />
<com.almabay.almachat.circularImageView.CircularImageView
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:layout_marginLeft="210dp"
    android:background="@drawable/color" />

xml 中的视图按顺序添加，因此最新添加的将在最前面。

我认为你应该在那之后调整 marginTops

编辑： 我认为更好的解决方案是将两个 CircularImageView 包装在一个 FrameLayout 中。
你能试试这样的东西，也许可以根据自己的喜好调整尺寸吗？

<FrameLayout
    android:layout_width="220dp"
    android:layout_height="230dp"
    android:layout_gravity="center">
    <com.almabay.almachat.circularImageView.CircularImageView
        android:id="@+id/profilePic"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="bottom" />
    <com.almabay.almachat.circularImageView.CircularImageView
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_gravity="top|right"
        android:background="@drawable/color" />
</FrameLayout>

Answer 2

您应该在布局中将橙色的 放在蓝色的之后。

Answer 3

对图像使用 RelativeLayout，同时位于 RelativeLayout 末尾的视图显示在顶部，其他视图与其重叠。

重叠两个圆形图像视图

Overlapping two circular image views

android

android-imageview