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);

    }
}

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

我的问题是，具有橙色的圆形图像视图应该在具有轮廓图片的圆形图像视图上方。但是这里的轮廓图片在具有橙色的图像视图上方。我如何修复它？

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，我认为

修改我认为更好的解决方案是将两个CircularImageViews包装在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末尾的视图显示在顶部，而其他视图则与其重叠。

重叠两个圆形图像视图

3 个答案: