【问题标题】:How do you create a transparent demo screen for an Android app?如何为 Android 应用创建透明的演示屏幕?
【发布时间】:2012-08-14 08:20:11
【问题描述】:

我正在尝试创建一个仅在用户首次安装我的应用程序时启动的半透明演示屏幕。以下是 Pulse News 应用的示例:

银河系

Nexus One

我希望用户能够滑动浏览几个这样的透明演示页面,而不是“点击关闭”功能。

对于我的第一次尝试,我从ViewPagerIndicator 库中修改了一个示例。我在每个视图寻呼机的片段内的 ImageViews 中使用了半透明的 PNG。然后,我在“主要活动”的 onCreate 方法中将其作为“演示活动”启动。

问题:在背景中看不到“主要活动”——它只是黑色的。我尝试了here 的解决方案,但并没有解决问题。

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

我还有另一个相关问题,这取决于它是如何实现的。我试图覆盖文本和箭头,使它们指向背景中的特定 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;
    }

}

DemoFragmentAdapter.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();
        }
    } }

DemoFragment.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);
    }
}

【问题讨论】:

  • 不看你的代码很难提出任何建议。如果你能把你的活动代码,它可能会有所帮助。
  • 这是个好问题。

标签: android android-viewpager transparent demo showcaseview


【解决方案1】:

将您的演示信息放在不同的活动中,并为其指定以下主题。

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

如果您使用 ActionBarSherlock,请将 parent 更改为 @style/Theme.Sherlock

这会给你一个透明的活动,所以你将能够看到它下面的活动。

现在我猜你也想要一个半透明的背景。

在(您的透明活动的)xml 布局中添加:

android:background="#aa000000" 

最后 6 位数字定义颜色:000000 为黑色。

前2个定义不透明度:00是100%透明,ff是100%不透明。所以选择介于两者之间的东西。

【讨论】:

  • 感谢您的回答!经过大量trial and error,这几乎就是我最终要做的事情。我仍然很好奇 Pulse 演示屏幕如何能够将覆盖的内容“重新定位”在正确的位置,即使在不同的屏幕尺寸上也是如此 - 请参阅更新的屏幕截图。有什么想法吗?
  • 在您的第一个活动中找到您希望指向的视图 (findViewById)。然后使用this method 获取它相对于根布局的位置。发送位置以覆盖意图中的活动。进行适当的对齐。
  • 或使用View.getLocationOnScreen(int[] location)View.getLocationInWindow(int[] location)。我不确定哪个更好。
  • @Gautam:“有什么想法吗?” -- 对于 Pulse,这是将一张图片放在左上角,另一张图片居中,第三张图片放在右下角的问题。基于RelativeLayout 的十几行XML 就足够了。
  • 这对我有用,但我在扩展活动时遇到了问题。所以为了使用 AppCompatActivity 我定义了这样的样式:
【解决方案2】:

你看过 ShowcaseView 吗? https://github.com/Espiandev/ShowcaseView.

使用这个:

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

【讨论】:

  • 谢谢,这正是我想要的。
  • 太棒了!你知道 iOS 有什么类似的吗?
  • 已弃用...开发人员的意思是基本 API 的设计不够好(部分正确)。
  • 我试过了,发现没有标签可以改变图片。
【解决方案3】:

Pulse 正在使用具有四个 ImageView 和四个 TextView 的 RelativeLayout。 屏幕截图中的文本都是 TextView 的,都有自己的自定义字体。

在您的清单中将以下内容添加到您的活动中:

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

在你的外部 RelativeLayout 添加:

android:background="#aa000000"

到你的styles.xml文件:

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

如何编写自定义字体的示例,您可以在以下位置找到:

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

来自 Hierarchy Viewer 的布局如下所示(红色框为 RelativeLayout 容器):

【讨论】:

    【解决方案4】:
    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();
    
    }
    

    【讨论】:

    • 正是我寻找的简单直接的方法,无需控制或堆叠活动即可轻松调用方法。谢谢
    【解决方案5】:

    为此,您需要在主布局的底部创建帮助布局 例如:(结构)

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

    【讨论】:

      【解决方案6】:

      将您的主要布局包装在 RelativeLayout 中,然后向其中添加第二个布局,例如:

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

      我相信覆盖布局低于 XML 文件中的主布局(如果有记忆的话)。然后,您可以在第二个布局中创建自己的布局 ViewFlipper,随心所欲。

      【讨论】:

      • 感谢您的回复!我试过这个,它似乎确实有效。但是,有一个问题 - 覆盖布局中的内容没有覆盖我在我的活动中拥有的 ActionBar 或 ActionBar 选项卡。
      • 您已将RelativeLayout 添加到demo_activity.xml 文件中? DemoActivity是你的主要(第一)Activity吗?
      • 好吧,“DemoActivity”是我尝试创建一个可以做同样事情的透明活动。 'MainActivity' 是我想要在后台进行的活动。所以我用你提到的'RelativeLayout'包装了'MainActivity'的布局,即'main_activity.xml',还插入了透明的'LinearLayout'。问题是,“main_activity.xml”中的所有内容都显示在“ActionBar”及其任何导航选项卡下方。
      【解决方案7】:

      创建一个新的活动(比如教程)。

      转到 Activity 的布局 xml 文件 (activity_tutorial)。 在父布局下,添加“android:background= #000”和“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>

      现在,转到应用程序清单文件并在您的教程活动下添加属性 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>

      就是这样,现在在任何其他活动之上运行此活动,您可以获得所需的结果。 自定义、添加文本、图像视图和其他内容以获得您想要的教程屏幕。 可以肯定的是,您可以使用这种技术使 viewpager 工作。

      【讨论】:

        【解决方案8】:

        您可以像他们那样查看 Android 启动器代码。我不知道那里的实现。

        如果是我,我会(如果只是一个简单的叠加层),所以您不会为您的应用程序弄乱您的布局,只需创建您的叠加层布局,然后通过将其直接添加到您的活动中将其附加到您的应用程序布局WindowManager .可以像在WindowManager 中添加ImageView 一样简单,监听ImageView 上的触摸,或者有一个超时从Window 中删除ImageView

        【讨论】:

          猜你喜欢
          • 2014-05-02
          • 1970-01-01
          • 1970-01-01
          • 2020-03-09
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多