Wie erstellen Sie einen transparenten Demobildschirm für eine Android-App?

Ich versuche, einen halbtransparenten Demobildschirm zu erstellen, der nur gestartet wird, wenn ein Benutzer meine Anwendung zum ersten Mal installiert. Hier ist ein Beispiel aus der Pulse News App:

Nexus Galaxie

Nexus Eins

Anstelle einer Funktion zum Tippen zum Entlassen möchte ich, dass der Benutzer durch einige dieser transparenten Demoseiten wischen kann.

Bei meinem ersten Versuch habe ich ein Beispiel aus der ViewPagerIndicator- Bibliothek geändert . Ich habe in ImageViews in jedem Fragment des View Pagers halbtransparente PNGs verwendet. Ich habe dies dann als 'Demo-Aktivität' in der onCreate-Methode meiner 'Hauptaktivität' gestartet.

Problem: Die 'Hauptaktivität' war nicht im Hintergrund zu sehen - stattdessen war sie nur schwarz. Ich versuchte , die Lösungen hier , aber das hat nicht das Problem zu beheben.

Gibt es einen besseren Ansatz, um so etwas zu schaffen, oder bin ich auf dem richtigen Weg?

Ich hatte auch eine andere verwandte Frage, die davon abhängt, wie dies umgesetzt wird. Ich versuche, Text und Pfeile so zu überlagern, dass sie auf bestimmte UI-Komponenten im Hintergrund zeigen. Wenn Sie ein PNG mit Text und Pfeilen verwenden, wird es wahrscheinlich auf verschiedenen Geräten nicht richtig skaliert. Das heißt, die Pfeile müssen nicht unbedingt auf die richtige UI-Komponente im Hintergrund zeigen. Gibt es eine Möglichkeit, dieses Problem ebenfalls anzugehen?

Vielen Dank!

Hier ist mein Code für den ersten Versuch:

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

Stellen Sie Ihre Demo-Informationen in eine andere Aktivität und geben Sie ihr das folgende Thema.

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

Wenn Sie ActionBarSherlock verwenden, wechseln Sie parentzu @style/Theme.Sherlock.

Dadurch erhalten Sie eine transparente Aktivität, sodass Sie die Aktivität darunter sehen können.

Jetzt wollen Sie wohl auch einen durchscheinenden Hintergrund.

Fügen Sie im XML-Layout (Ihrer transparenten Aktivität) Folgendes hinzu:

android:background="#aa000000" 

Die letzten 6 Ziffern definieren die Farbe: 000000 ist schwarz.

Die ersten 2 definieren die Deckkraft: 00 ist 100% transparent, ff ist 100% undurchsichtig. Wählen Sie also etwas dazwischen.

Haben Sie sich ShowcaseView angesehen? https://github.com/Espiandev/ShowcaseView .

Verwenden Sie diese:

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 verwendet ein RelativeLayout mit vier ImageViews und vier TextViews. Der Text im Screenshot besteht ausschließlich aus TextViews mit einer eigenen benutzerdefinierten Schriftart.

Fügen Sie in Ihrem Manifest Folgendes zu Ihrer Aktivität hinzu:

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

Fügen Sie Ihrem äußeren RelativeLayout Folgendes hinzu:

android: background = "# aa000000"

Zu Ihrer Datei 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>    

Ein Beispiel für die Programmierung der benutzerdefinierten Schriftart finden Sie unter:

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

Das Layout im Hierarchy Viewer sieht folgendermaßen aus (das rote Feld ist der RelativeLayout-Container):

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

}

Dazu müssen Sie unten im Hauptlayout ein Hilfelayout erstellen, z. B.: (Struktur)

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

Wickeln Sie Ihr Hauptlayout in ein RelativeLayoutund fügen Sie dann ein zweites Layout hinzu, etwa:

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

Ich glaube, das Overlay-Layout unterschreitet das Hauptlayout in der XML-Datei (sofern Speicherplatz zur Verfügung steht). Sie können dann Ihr eigenes Layout ViewFlippererstellen, was auch immer Sie in diesem zweiten Layout möchten.

Machen Sie eine neue Aktivität (sagen wir Tutorial).

Wechseln Sie zur Layout-XML-Datei Ihrer Aktivität (activity_tutorial). Fügen Sie unter dem übergeordneten Layout "android: background = # 000" und "android: alpha =" 0.5 "hinzu.

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

Gehen Sie nun zur Anwendungsmanifestdatei und fügen Sie unter Ihrer Lernaktivität das Attribut android: theme = "@ android: style / Theme.Translucent.NoTitleBar"> hinzu

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

Führen Sie diese Aktivität jetzt über jede andere Aktivität aus, und Sie können die gewünschten Ergebnisse erzielen. Passen Sie Text, Bildansichten und andere Dinge an, fügen Sie sie hinzu, um den gewünschten Tutorial-Bildschirm zu erhalten. Ziemlich sicher, dass Sie einen Viewpager mit dieser Technik zum Laufen bringen können.

Sie können einfach den Android-Launcher-Code überprüfen, während sie es tun. Ich kenne dort keine Umsetzung.

Wenn ich es wäre, würde ich (wenn nur eine einfache Überlagerung), damit Sie nicht mit Ihrem Layout für Ihre Anwendung schrauben, erstellen Sie einfach Ihr Überlagerungslayout und hängen Sie es über Ihr Anwendungslayout an, indem Sie es direkt mit Ihren Aktivitäten hinzufügen WindowManager. Könnte so einfach sein wie das Hinzufügen eines ImageViewzu WindowManager, das Abhören von Berührungen des ImageViewoder eine Zeitüberschreitung, um das ImageViewvon Ihrem zu entfernen Window.