Androidアプリの透明なデモ画面をどのように作成しますか?


105

ユーザーが初めてアプリケーションをインストールしたときにのみ起動する半透明のデモ画面を作成しようとしています。以下は、Pulse Newsアプリの例です。

Galaxy Nexus

Galaxy NexusのPulse Newsのスクリーンショットの例

Nexus One

ここに画像の説明を入力してください

「タップして閉じる」機能の代わりに、ユーザーがこのような透明なデモページをいくつかスワイプできるようにしたいと考えています。

最初の試みとして、ViewPagerIndicatorライブラリのサンプルを変更しました。ビューページャーの各フラグメント内のImageViewで半透明のPNGを使用しました。次に、これを「メインアクティビティ」のonCreateメソッドの「デモアクティビティ」として起動しました。

問題:「メインアクティビティ」がバックグラウンドで表示されず、代わりに真っ黒でした。ここで解決策を試しましたが、問題は解決しませんでした。

このようなものを作成するためのより良いアプローチはありますか、それとも私は正しい軌道に乗っていますか?

また、これがどのように実装されるかに依存する別の関連する質問がありました。テキストと矢印をオーバーレイして、バックグラウンドの特定の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);
    }
}

コードを確認しないと、何も提案するのが困難です。あなたがあなたの活動コードを置くことができれば、それは役立つかもしれません。
Sayyam

11
それは良い質問です。
con_9 2012

回答:


79

デモ情報を別のアクティビティに入れて、次のテーマを与えます。

<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%不透明です。ですから、その中間の何かを選択してください。


1
答えてくれてありがとう!多くの試行錯誤の末、これは結局私がやったことです。Pulseデモ画面で、オーバーレイされたコンテンツをどのようにして適切な場所に、どのように「再配置」できるかについて、私はまだ興味があります。更新されたスクリーンショットをご覧ください。何か案は?
ゴータム2012

2
最初のアクティビティで、ポイントするビューを見つけます(findViewById)。次に、このメソッドを使用して、ルートレイアウトに対する相対的な位置を取得します。インテントのアクティビティをオーバーレイする位置を送信します。適切な配置を行います。
Benito Bertoli

2
または使用View.getLocationOnScreen(int[] location)View.getLocationInWindow(int[] location)。どちらが良いかわかりません。
Benito Bertoli 2012

@ゴータム:「何かアイデアは?」-Pulseの場合、これは1つの画像を左上隅に配置し、別の画像を中央に配置し、3番目の画像を右下隅に配置することです。に基づいた数十行程度のXMLでRelativeLayout十分です。
CommonsWare 2012

1
これはうまくいきましたが、拡張アクティビティを行うときに問題が発生しました。したがって、AppCompatActivityを使用するために、次のようなスタイルを定義しました:<style name = "Transparent" parent = "Theme.AppCompat"> <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>
Jose Q

65

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

1
ありがとう、それがまさに私が探していたものです。
Snicolas 2012

驚くばかり!iOSで同様のことを知っていますか?
KVISH 2014

まだ非推奨です...開発者は、基本的なAPIの設計が十分ではないことを意味しました(これは部分的に正しい)。
Laurent Meyer

私がこれを試したところ、画像を変更するためのタグがないことがわかりました。
Anshul Tyagi

11

Pulseは、4つのImageViewと4つの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/

階層ビューアのレイアウトは次のようになります(赤いボックスはRelativeLayoutコンテナです)。

ここに画像の説明を入力してください


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

}

正確に私が探しているものは単純で単純で、アクティビティを制御したり積み重ねたりせずに簡単にメソッドを呼び出すことができます。感謝
Abhishek Garg

5

このためには、メインレイアウトの下部にヘルプレイアウトを作成する必要があります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>

2

メインレイアウトをでラップしRelativeLayout、次にそれに2番目のレイアウトを追加します。

<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、この2番目のレイアウト内で、必要に応じて独自のレイアウトを作成できます。


1
御返答いただき有難うございます!私はこれを試しました、そしてそれはうまくいくようです。ただし、1つの問題があります。オーバーレイレイアウトのコンテンツが、アクティビティにあるActionBarまたはActionBarタブを覆っていません。
ゴータム

をファイルに追加しRelativeLayoutましたdemo_activity.xmlか?そしてDemoActivity、あなたのメイン(最初の)Activityですか?
エリック

まあ 'DemoActivity'は、同じことを行う透過的なアクティビティを作成するための私の試みでした。「MainActivity」は、バックグラウンドで私が欲しいアクティビティです。そこで、「MainActivity」のレイアウト、つまり「main_activity.xml」を「RelativeLayout」でラップして、透明な「LinearLayout」も挿入しました。問題は、「main_activity.xml」のすべてのコンテンツが「ActionBar」とそのナビゲーションタブの下に表示されることです。
ゴータム

1

新しいアクティビティを作成します(チュートリアルなど)。

アクティビティのレイアウト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>

それで、他のアクティビティの上にこのアクティビティを実行すると、目的の結果を得ることができます。カスタマイズ、テキスト、画像ビューなどを追加して、希望のチュートリアル画面を取得します。この手法でビューページャーを動作させることができることを確認してください。


0

Androidランチャーコードをチェックアウトするだけです。実装はわかりません。

私の場合は(単純なオーバーレイの場合)、アプリケーションのレイアウトにねじ込まないで、オーバーレイレイアウトを作成し、アクティビティに直接追加して、アプリケーションレイアウトの上にアタッチしますWindowManager。追加するような単純なのだろうImageViewWindowManager、上のタッチのために耳を傾けImageView、または削除するためのタイムアウト持っているImageViewあなたからのWindow

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.