web-dev-qa-db-ja.com

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

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

Galaxy Nexus

Example screenshot from Pulse News on Galaxy Nexus

Nexus One

enter image description here

「タップして閉じる」機能の代わりに、ユーザーにこのような透過的なデモページをスワイプできるようにしてほしい。

最初の試みでは、 ViewPagerIndicator ライブラリのサンプルを変更しました。ビューページャーの各フラグメント内のImageViewsで半透明の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);
    }
}
androidandroid-viewpagertransparentdemoshowcaseview
103
Gautam

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

<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％不透明です。そのため、間に何かを選択します。

79
Benito Bertoli

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

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コンテナです）。

enter image description here

11
powder366
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();

}
6
Ravikiran

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

メインレイアウトを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ファイルのメインレイアウトの下にあると思います（メモリが提供される場合）。その後、この2番目のレイアウト内で必要なものであれば、独自のレイアウトViewFlipperを作成できます。

2
Eric

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

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

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

1
Ankush Wadhwa

Androidランチャーコードをチェックアウトできます。私はそこに実装を知りません。

私の場合（単純なオーバーレイの場合）、アプリケーションのレイアウトに手を加えずに、オーバーレイレイアウトを作成し、アクティビティWindowManagerに直接追加して、アプリケーションレイアウトの上に添付します。 ImageViewをWindowManagerに追加する、ImageViewのタッチを聞く、またはImageViewをWindowから削除するタイムアウトを設定するのと同じくらい簡単です。 _。

0
Jug6ernaut