如何为 Android 应用程序创建一个透明的演示屏幕?

我试图创建一个半透明的演示屏幕,只有当用户第一次安装我的应用程序时才会启动。下面是 Pulse News 应用程序中的一个例子:

Galaxy Nexus

Example screenshot from Pulse News on Galaxy Nexus

Nexus One

enter image description here

我希望用户能够通过几个这样透明的演示页面,而不是一个“点击-解雇”功能。

对于我的第一次尝试,我修改了来自 ViewPagerIndicator库的一个示例。我在每个视图页面片段的 ImageView 中使用了半透明的 PNG。然后,我在“ main activity”的 onCreate 方法中将其作为“ demo activity”启动。

问题: “主要活动”不能在背景中看到-相反,它只是黑色的。我尝试了 给你的解决方案,但是没有解决问题。

有没有更好的方法来创建这样的东西,或者我在正确的轨道上?

我还有另一个相关的问题,这取决于如何实现这一点。我试图覆盖文本和箭头,让它们指向背景中特定的 UI 组件。通过使用带有文本和箭头的 PNG,它可能无法在不同的设备上正确伸缩。也就是说,箭头不一定指向背景中正确的 UI 组件。有没有办法同时解决这个问题?

谢谢!

这是我第一次尝试的代码:

DemoActivity.java

public class DemoActivity extends FragmentActivity {
DemoFragmentAdapter mAdapter;
ViewPager mPager;
PageIndicator mIndicator;


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


mAdapter = new DemoFragmentAdapter(getSupportFragmentManager());


mPager = (ViewPager)findViewById(R.id.pager);
mPager.setAdapter(mAdapter);
//mPager.setAlpha(0);


UnderlinePageIndicator indicator = (UnderlinePageIndicator)findViewById(R.id.indicator);
indicator.setViewPager(mPager);
indicator.setFades(false);
mIndicator = indicator;
}


}

Java

class DemoFragmentAdapter extends FragmentPagerAdapter {
protected static final int[] CONTENT = new int[] { R.drawable.demo1, R.drawable.demo2, R.drawable.demo3, R.drawable.demo4};


private int mCount = CONTENT.length;


public DemoFragmentAdapter(FragmentManager fm) {
super(fm);
}


@Override
public Fragment getItem(int position) {
return DemoFragment.newInstance(CONTENT[position % CONTENT.length]);
}


@Override
public int getCount() {
return mCount;
}


public void setCount(int count) {
if (count > 0 && count <= 10) {
mCount = count;
notifyDataSetChanged();
}
} }

Java

public final class DemoFragment extends Fragment {
private static final String KEY_CONTENT = "TestFragment:Content";


public static DemoFragment newInstance(int content) {
DemoFragment fragment = new DemoFragment();
fragment.mContent = content;
return fragment;
}


private int mContent;


@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);


if ((savedInstanceState != null) && savedInstanceState.containsKey(KEY_CONTENT)) {
mContent = savedInstanceState.getInt(KEY_CONTENT);
}
}


@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {


ImageView image = new ImageView(getActivity());
image.setBackgroundResource(mContent);


LinearLayout layout = new LinearLayout(getActivity());
layout.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
layout.setGravity(Gravity.CENTER);
layout.addView(image);


return layout;
}


@Override
public void onSaveInstanceState(Bundle outState) {
super.onSaveInstanceState(outState);
outState.putInt(KEY_CONTENT, mContent);
}
}
73085 次浏览

Wrap your main layout in a RelativeLayout, then add a second layout to that, something like:

<RelativeLayout
.... >


<LinearLayout
.... >


<!-- Contents of your main layout -->


</LinearLayout>


<LinearLayout
....
android:background="#44000000" > <!-- This is alpha 68/255, black -->


<!-- Contents of your overlay layout -->


</LinearLayout>


</RelativeLayout>

I believe the overlay layout goes below the main layout in the XML file (if memory serves). You can then make your own layout, ViewFlipper, whatever you want within this second layout.

You could just check out the Android launcher code, as they do it. I do not know there implementation.

If it was me I would (if just a simple overlay) so you dont screw with your layout for your application, just create your overlay layout, and attach it over ur application layout by adding it directly with your activities WindowManager. Could be as simple as adding a ImageView to the WindowManager, listen for touches on the ImageView, or have a timeout to to remove the ImageView from your Window.

Put your demo info in a different activity and give it the following theme.

<style name="Transparent" parent="@android:style/Theme.NoTitleBar">
<item name="android:windowContentOverlay">@null</item>
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowBackground">@android:color/transparent</item>
<item name="android:windowNoTitle">true</item>
<item name="android:backgroundDimEnabled">false</item>
</style>

If you're using ActionBarSherlock change parent to @style/Theme.Sherlock.

This will give you a transparent activity, so you will be able to see the activity below it.

Now I'm guessing you want a translucent background too.

In the xml layout (of your transparent activity) add:

android:background="#aa000000"

The last 6 digits define the color: 000000 is black.

The first 2 define the opacity: 00 is 100% transparent, ff is 100% opaque. So choose something in between.

Have you looked at ShowcaseView? https://github.com/Espiandev/ShowcaseView.

Using this:

View showcasedView = findViewById(R.id.view_to_showcase);
ViewTarget target = new ViewTarget(showcasedView);
ShowcaseView.insertShowcaseView(target, this, R.string.showcase_title, R.string.showcase_details);

Pulse is using a RelativeLayout with four ImageView's and four TextView's. The text in the screen shot is all TextView's with their own custom font.

In your Manifest add the following to your Activity:

android:theme="@style/Theme.Transparent">

In to your outer RelativeLayout add:

android:background="#aa000000"

To your styles.xml file:

<style name="Theme.Transparent" parent="android:Theme">
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowBackground">@android:color/transparent</item>
<item name="android:windowContentOverlay">@null</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowIsFloating">false</item>
<item name="android:backgroundDimEnabled">false</item>
</style>

An example how to program the custom font you can find at:

https://github.com/commonsguy/cw-android/tree/master/Fonts/FontSampler/

The layout from the Hierarchy Viewer looks like this (the red box is the RelativeLayout container):

enter image description here

Make a new Activity (say Tutorial).

Go to your Activity's layout xml file (activity_tutorial). Under the parent layout, add "android:background= #000" and "android:alpha= "0.5"

<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"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
                

                

tools:context=".Tutorial_Activity"
android:background="#000"
android:alpha="0.5">
..................................................
....................................................
.............................................
...............................................
  

</RelativeLayout>

Now, go to application manifest file and under your tutorial activity add attribute android:theme="@android:style/Theme.Translucent.NoTitleBar">

<application>
.........................................
..........................................
....................................
..........................................


<activity
android:name="com.aird.airdictionary.Tutorial_Activity"
android:label="@string/title_activity_tutorial"
            

android:theme="@android:style/Theme.Translucent.NoTitleBar">
  

</activity>
</application>


</manifest>

Thats it, now run this activity on top of any other activity and you can get the desired results. Customize, add text, imageviews and other stuff to get your desired tutorial screen. Pretty sure that you can make a viewpager work with this technique.

setContentView(R.layout.sample_main);
showOverLay();


private void showOverLay(){


final Dialog dialog = new Dialog(context, android.R.style.Theme_Translucent_NoTitleBar);


dialog.setContentView(R.layout.transparent);


RelativeLayout layout = (RelativeLayout) dialog.findViewById(R.id.transparent);


layout.setOnClickListener(new View.OnClickListener() {


@Override


public void onClick(View arg0) {


dialog.dismiss();


}


});


dialog.show();


}

For this you need to create help layout in bottom of your main layout ex:(structure)

<Parent layout>


<Layout 1>(Linear,Relative,....)
Main layout
your view...
</Layout 1>


<Layout help>
set #70000000 as background of this layout
#70(transparent range can change) 000000(black)
and height and width as fillparent
</Layout help>


</Parent layout>