我希望在我的应用程序尝试登录服务器时在屏幕上显示一个叠加层,显示一些加载代码甚至可能是一些文本。我的登录屏幕都在垂直线性布局内。
我想要达到的效果是这样的: http: //docs.xamarin.com/recipes/ios/standard_controls/popovers/display_a_loading_message
我希望在我的应用程序尝试登录服务器时在屏幕上显示一个叠加层,显示一些加载代码甚至可能是一些文本。我的登录屏幕都在垂直线性布局内。
我想要达到的效果是这样的: http: //docs.xamarin.com/recipes/ios/standard_controls/popovers/display_a_loading_message
也许为时已晚,但我想有人可能会觉得它有用。
活动:
public class MainActivity extends Activity implements View.OnClickListener {
String myLog = "myLog";
AlphaAnimation inAnimation;
AlphaAnimation outAnimation;
FrameLayout progressBarHolder;
Button button;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
button = (Button) findViewById(R.id.button);
progressBarHolder = (FrameLayout) findViewById(R.id.progressBarHolder);
button.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.button:
new MyTask().execute();
break;
}
}
private class MyTask extends AsyncTask <Void, Void, Void> {
@Override
protected void onPreExecute() {
super.onPreExecute();
button.setEnabled(false);
inAnimation = new AlphaAnimation(0f, 1f);
inAnimation.setDuration(200);
progressBarHolder.setAnimation(inAnimation);
progressBarHolder.setVisibility(View.VISIBLE);
}
@Override
protected void onPostExecute(Void aVoid) {
super.onPostExecute(aVoid);
outAnimation = new AlphaAnimation(1f, 0f);
outAnimation.setDuration(200);
progressBarHolder.setAnimation(outAnimation);
progressBarHolder.setVisibility(View.GONE);
button.setEnabled(true);
}
@Override
protected Void doInBackground(Void... params) {
try {
for (int i = 0; i < 5; i++) {
Log.d(myLog, "Emulating some task.. Step " + i);
TimeUnit.SECONDS.sleep(1);
}
} catch (InterruptedException e) {
e.printStackTrace();
}
return null;
}
}
}
布局xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Start doing stuff"
android:id="@+id/button"
android:layout_below="@+id/textView"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Do Some Stuff"
android:id="@+id/textView"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<FrameLayout
android:id="@+id/progressBarHolder"
android:animateLayoutChanges="true"
android:visibility="gone"
android:alpha="0.4"
android:background="#000000"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ProgressBar
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminate="true"
android:layout_gravity="center" />
</FrameLayout>
</RelativeLayout>
我喜欢Kostya But 的回答中的方法。
在此基础上,这里有一些想法可以使相同的叠加层在您的应用程序中轻松重用:
考虑将覆盖 FrameLayout 放在单独的布局文件中,例如res/layout/include_progress_overlay
:
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/progress_overlay"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0.4"
android:animateLayoutChanges="true"
android:background="@android:color/black"
android:clickable="true"
android:visibility="gone">
<ProgressBar
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:indeterminate="true"/>
</FrameLayout>
(我在叠加层 FrameLayout 中添加的一件事是android:clickable="true"
。因此,当显示叠加层时,它会阻止点击进入其下方的 UI 元素。至少在我的典型用例中,这是我想要的。)
然后在需要的地方包含它:
<!-- Progress bar overlay; shown while login is in progress -->
<include layout="@layout/include_progress_overlay"/>
在代码中:
View progressOverlay;
[...]
progressOverlay = findViewById(R.id.progress_overlay);
[...]
// Show progress overlay (with animation):
AndroidUtils.animateView(progressOverlay, View.VISIBLE, 0.4f, 200);
[...]
// Hide it (with animation):
AndroidUtils.animateView(progressOverlay, View.GONE, 0, 200);
将动画代码提取到 util 方法中:
/**
* @param view View to animate
* @param toVisibility Visibility at the end of animation
* @param toAlpha Alpha at the end of animation
* @param duration Animation duration in ms
*/
public static void animateView(final View view, final int toVisibility, float toAlpha, int duration) {
boolean show = toVisibility == View.VISIBLE;
if (show) {
view.setAlpha(0);
}
view.setVisibility(View.VISIBLE);
view.animate()
.setDuration(duration)
.alpha(show ? toAlpha : 0)
.setListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
view.setVisibility(toVisibility);
}
});
}
(这里使用view.animate()
API 12 中添加的 ,而不是AlphaAnimation
。)
我在相对布局中有 ProgressBar,我分别隐藏或显示它。是的,活动可以是透明的。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="@+id/hsvBackgroundContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
</LinearLayout>
<ProgressBar
android:id="@+id/pbProgess"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" />
</RelativeLayout>
可以使用 ProgressDialog 创建在应用程序上带有消息的微调器。虽然它没有达到图片中的确切效果,但这是表明应用程序正在运行的好方法。
我做了一个库(还没有很好的记录,在减轻一些工作压力后几天内做)来做这种进度对话框。我使它成为一种非常可重用的方式,这就是为什么您只需配置一次并在应用程序中的任何位置隐藏显示它,只需调用一行代码即可。配置—— _
LoadingPopup.getInstance(this)
.customLoading()
.setCustomViewID(R.layout.yourProgressLayout,R.color.yourProgressBackgroundColor)
.doIntentionalDelay()
.setDelayDurationInMillSec(5000)
.setBackgroundOpacity(70)/*How much transparent you want your background*/
.build();
为了显示进度 -
LoadingPopup.showLoadingPopUp();
为了隐藏进度-
LoadingPopup.hideLoadingPopUp();
我有同样的问题,我尝试了解决方案,但不是最好的 UI,所以我做了以下步骤。
content.background="#000000" content.alpha="0.4"
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true"
tools:context=".MainActivity">
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/textView"
android:layout_centerHorizontal="true"
android:text="Start doing stuff" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="Do Some Stuff"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
<ProgressBar
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:indeterminate="true"
android:visibility="gone" />
</FrameLayout>
您必须使用 AsyncTask 之类的线程概念进行后台操作。使用它,您可以隐藏 UI 部分的实际工作。并且 AsyncTask 将在您的操作完成后未分配。