Android 使用者個人中心開發記錄（一）

摘要： 最近開始開發畢業論文所需的app的前臺介面 寫到使用者個人介面這裡，記錄一些坑，由於我邊學邊寫的，可能有些地方會出現錯誤 首先我用 TabLayout + ViewPager + Fragment 搭建好了整個應用的主介面框架。每個介面就是一個Fragment，在查閱google和b...

最近開始開發畢業論文所需的app的前臺介面

寫到使用者個人介面這裡，記錄一些坑，由於我邊學邊寫的，可能有些地方會出現錯誤

首先我用 TabLayout + ViewPager + Fragment 搭建好了整個應用的主介面框架。每個介面就是一個Fragment，在查閱google和baidu之後，據說這種搭配會造成資料儲存上的麻煩，暫且擱置，後面搭建後臺時再進行修改

參考CDSN上面的一篇部落格 https://blog.csdn.net/asfang/...

然後，在寫使用者介面的時候決定照著這篇文章去做，用下面兩種開源庫去載入圖片

implementation 'com.github.bumptech.glide:glide:3.7.0'
implementation 'jp.wasabeef:glide-transformations:2.0.1'

使用者介面的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="wrap_content"
android:orientation="vertical">
<!--個人資訊-->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">

<ImageView
android:id="@+id/h_back"
android:layout_width="match_parent"
android:layout_height="200dp" />

<ImageView
android:id="@+id/h_front"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_centerInParent="true" />

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="@id/h_back"
android:layout_marginBottom="20dp">

<ImageView
android:id="@+id/user_line"
android:layout_width="1dp"
android:layout_height="25dp"
android:layout_centerHorizontal="true"
android:layout_marginStart="15dp"
android:background="@color/colorWhite" />

<TextView
android:id="@+id/user_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toStartOf="@id/user_line"
android:text="Profile Fragment"
android:textColor="@color/colorWhite"
android:textSize="17sp" />

<TextView
android:id="@+id/user_val"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
android:layout_toEndOf="@id/user_line"
android:text="phone_num"
android:textColor="@color/colorWhite"
android:textSize="17sp" />
</RelativeLayout>
</RelativeLayout>
</LinearLayout>

思路：

• 最外層是一個LinearLayout，orientation為vertical，包含所有的元件
• 一個RelativeLayout包含圖片和使用者
• 因為最後的效果是後面是虛化的圖片，前面是一個圓形的頭像，所以在這裡先放兩個ImageView
• 中間再加入一個RelativeLayout緊貼著圓形頭像下方

/**
 * 個人資訊和設定頁卡Fragment
 */
public class ProfileFragment extends Fragment {
private static final String ARG_FROM = "From";
private String mFrom;
private TextView mTextView;
private ImageView blurImageView;
private ImageView avatarImageView;

@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.profile_fragment, container, false);
blurImageView = (ImageView) view.findViewById(R.id.h_back);
avatarImageView = (ImageView) view.findViewById(R.id.h_front);
Glide.with(getActivity()).load(R.drawable.person_pic).bitmapTransform(new BlurTransformation(getActivity(), 25), new CenterCrop(getActivity())).into(blurImageView);
Glide.with(getActivity()).load(R.drawable.person_pic).bitmapTransform(new CropCircleTransformation(getActivity())).into(avatarImageView);
return view;
}

public static ProfileFragment newInstance(String from) {

Bundle args = new Bundle();
args.putString(ARG_FROM, from);
ProfileFragment fragment = new ProfileFragment();
fragment.setArguments(args);
return fragment;
}
}

這是我第一次寫好的初始化介面程式碼。

因為我是在Fragment中載入的，之前的文章是直接在Activity中寫的，所以獲取上下文物件原文可以直接用 this 關鍵字，我這裡用了 getActivity() 代替，發現在Glide載入圖片的第一行中出現了空指標異常，然後用 getContext() ， getActivity().getApplicationContext() ， getContext().getApplicationContext() 都不行，因為這四句都一樣的效果，使得Fragment能獲得繫結的Activity上下文環境

查閱Google，發現重寫 onCreate() 和 onDetach() 之後才能保證不會崩潰

public class ProfileFragment extends Fragment {

public Context mContext;

...

@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mContext = getContext();
}

@Override
public void onDetach() {
super.onDetach();
mContext = null;
}
}

還有另外一種方法能解決 getActivity() 為 null 的情況，參考自 https://blog.csdn.net/wdd1324...

恢復Fragment之前把儲存Bundle裡面的資料給清除。趕在Activity恢復其之前所繫結的Fragment之前清除所有儲存在 savedInstanceState 中的資訊。方法如下：

if (savedInstanceState != null) {
savedInstanceState.putParcelable("android:support:fragments", null); 
//或者
//String FRAGMENTS_TAG = "Android:support:fragments";
// remove掉儲存的Fragment
// savedInstanceState.remove(FRAGMENTS_TAG);
}
super.onCreate(savedInstanceState); 

activity中
@Override
protected void onSaveInstanceState(Bundle outState) {
//super.onSaveInstanceState(outState);
}