एंड्रॉइड ऐप के लिए आप पारदर्शी डेमो स्क्रीन कैसे बनाते हैं?


105

मैं एक अर्ध-पारदर्शी डेमो स्क्रीन बनाने की कोशिश कर रहा हूं जो केवल तभी लॉन्च होती है जब कोई उपयोगकर्ता पहली बार मेरा एप्लिकेशन इंस्टॉल करता है। यहां पल्स न्यूज़ ऐप का एक उदाहरण दिया गया है:

गैलेक्सी नेक्सस

गैलेक्सी नेक्सस पर पल्स न्यूज से उदाहरण स्क्रीनशॉट

नेक्सस वन

यहां छवि विवरण दर्ज करें

एक 'टैप-टू-आउट' सुविधा के बजाय, मैं चाहता हूं कि उपयोगकर्ता ऐसे पारदर्शी डेमो पृष्ठों के एक जोड़े के माध्यम से स्वाइप करने में सक्षम हो।

अपने पहले प्रयास के लिए, मैंने ViewPagerIndicator लाइब्रेरी से एक नमूना संशोधित किया । मैंने प्रत्येक पेजर के टुकड़ों के अंदर ImageViews में अर्ध-पारदर्शी PNGs का उपयोग किया। मैंने तब इसे अपनी 'मुख्य गतिविधि' की ऑनक्रैट विधि में 'डेमो एक्टिविटी' के रूप में लॉन्च किया था।

समस्या: 'मुख्य गतिविधि' को पृष्ठभूमि में नहीं देखा जा सकता था - इसके बजाय यह सिर्फ काला था। मैं यहाँ समाधान की कोशिश की , लेकिन यह समस्या को ठीक नहीं किया।

क्या इस तरह का कुछ बनाने के लिए एक बेहतर तरीका है, या मैं सही रास्ते पर हूं?

मेरे पास एक और संबंधित प्रश्न भी था जो इस बात पर निर्भर करता है कि इसे कैसे लागू किया जाता है। मैं पाठ और तीर को ओवरले करने की कोशिश कर रहा हूं, जैसे कि वे पृष्ठभूमि में विशेष रूप से UI घटकों पर इंगित करते हैं। पीएनजी का उपयोग करने से जिसमें पाठ और तीर होते हैं, यह संभावना है कि यह विभिन्न उपकरणों पर ठीक से स्केल नहीं करेगा। यानी, पृष्ठभूमि में सही 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);
    }
}

आपके कोड को देखे बिना कुछ भी सुझाना मुश्किल है। यदि आप अपना गतिविधि कोड डाल सकते हैं, तो यह मदद कर सकता है।
सय्यम

11
यह एक अच्छा सवाल है।
con_9

जवाबों:


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% पारदर्शी है, एफएफ 100% अपारदर्शी है। इसलिए बीच में कुछ चुनें।


1
जवाब के लिए धन्यवाद! यह बहुत ज्यादा है जो मैंने बहुत परीक्षण और त्रुटि के बाद किया । मैं अभी भी उत्सुक हूं कि कैसे पल्स डेमो स्क्रीन विभिन्न स्थानों पर, यहां तक ​​कि अलग-अलग स्क्रीन साइज पर - ओवरले कंटेंट को 'रिपोज' करने में सक्षम है, अपडेटेड स्क्रीनशॉट देखें। कोई विचार?
गौतम

2
अपनी पहली गतिविधि में वह दृश्य ढूंढें जिसे आप इंगित करना चाहते हैं ( findViewById)। फिर इस पद्धति का उपयोग करके रूट लेआउट के सापेक्ष अपनी स्थिति प्राप्त करें । आशय में गतिविधि को ओवरले करने के लिए स्थिति भेजें। उचित संरेखण करें।
बेनिटो बर्टोली

2
या उपयोग View.getLocationOnScreen(int[] location)या View.getLocationInWindow(int[] location)। मुझे यकीन नहीं है कि कौन सा बेहतर है।
बेनिटो बर्टोली

@ गौतम: "कोई विचार?" - पल्स के लिए, यह एक छवि को ऊपरी-बाएं कोने में, दूसरी छवि केंद्रित, और निचले-दाएं कोने में एक तीसरी छवि डालने का मामला है। एक दर्जन या तो XML की लाइनें, पर आधारित RelativeLayout, पर्याप्त होगा।
कॉमन्सवेयर

1
इसने मेरे लिए काम किया, लेकिन मुझे अपनी गतिविधियों में समस्या थी एक्टिविटी को बढ़ाने की। इसलिए AppCompatActivity का उपयोग करने के लिए मैंने इस तरह की शैली को परिभाषित किया: <style name = "पारदर्शी" माता-पिता = "Theme.AppCompat"> <आइटम का नाम = "android: windowContentOverlay"> @ null / आइटम> <आइटम नाम = "android : windowIsTranslucent "> true </ item> <item name =" android: windowBackground "> @ android: color / पारदर्शी </ आइटम> <आइटम नाम =" android: windowNoTitle "> true </ item> <item name =" android : backgroundDimEnabled "> झूठा </ आइटम> </ शैली>
जोस क्यू

65

क्या आपने शोकेस व्यू को देखा है? 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
धन्यवाद, यह वही है जो मैं देख रहा था।
स्निकोलस

बहुत बढ़िया! क्या आप iOS के लिए भी कुछ ऐसा ही जानते हैं?
केविश

अभी तक पदावनत ... डेवलपर का मतलब था कि मूल एपीआई का डिज़ाइन पर्याप्त रूप से अच्छा नहीं था (जो आंशिक रूप से सच था)।
लॉरेंट मेयर

मैंने यह कोशिश की और मैंने पाया कि छवियों को बदलने के लिए कोई टैग नहीं है।
अंशुल त्यागी

11

पल्स चार ImageView और चार TextView के साथ एक RelativeLayout का उपयोग कर रहा है। स्क्रीन शॉट में पाठ सभी TextView अपने कस्टम फ़ॉन्ट के साथ है।

अपने घोषणापत्र में अपनी गतिविधि में निम्नलिखित जोड़ें:

एंड्रॉयड: विषय = "@ शैली / Theme.Transparent">

अपने बाहरी संबंध में जोड़ें:

एंड्रॉयड: पृष्ठभूमि = "# aa000000"

अपनी शैलियों के लिए। 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();

}

बिल्कुल वही जो मैं सरल और सीधे आगे देखता हूं, और आसानी से विधि को नियंत्रित या स्टैकिंग गतिविधियों के बिना कॉल करता हूं। धन्यवाद
अभिषेक गर्ग

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>

2

अपने मुख्य लेआउट को एक में लपेटें 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आप इस दूसरे लेआउट में जो चाहें , अपना लेआउट बना सकते हैं ।


1
आपके प्रतिक्रिया के लिए धन्येवाद! मैंने यह कोशिश की और यह काम करने लगता है। हालाँकि, एक समस्या है - ओवरले लेआउट में सामग्री एक्शनबार या एक्शनबेर टैब नहीं है जो मेरी गतिविधि में हैं।
गौतम

जुड़ने पर आपको RelativeLayoutकरने के लिए demo_activity.xmlफ़ाइल? और DemoActivityआपका मुख्य (पहला) है Activity?
एरिक

अच्छी तरह से 'डेमोएक्टिविटी' एक पारदर्शी गतिविधि बनाने का मेरा प्रयास था जो एक ही काम करेगा। 'MainActivity' वह गतिविधि है जो मैं पृष्ठभूमि में नीचे चाहता हूं। इसलिए मैंने आपके लिए 'RelativeLayout' की तरह 'MainActivity' यानी 'main_activity.xml' के लिए लेआउट को लपेटा और पारदर्शी '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 जोड़ें: विषय = "@ 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 यह, अब किसी अन्य गतिविधि के शीर्ष पर इस गतिविधि को चलाएं और आप वांछित परिणाम प्राप्त कर सकते हैं। अपने इच्छित ट्यूटोरियल स्क्रीन को प्राप्त करने के लिए टेक्स्ट, चित्र और अन्य सामग्री को अनुकूलित करें। बहुत यकीन है कि आप इस तकनीक के साथ एक viewpager काम कर सकते हैं।


0

आप एंड्रॉइड लॉन्चर कोड की जांच कर सकते हैं, जैसा कि वे करते हैं। मुझे वहां क्रियान्वयन की जानकारी नहीं है।

यदि यह मैं होता तो मैं (यदि सिर्फ एक साधारण ओवरले) होता, तो आप अपने आवेदन के लिए अपने लेआउट के साथ पेंच नहीं करते, बस अपना ओवरले लेआउट बनाते, और इसे अपनी गतिविधियों में सीधे जोड़कर उर एप्लीकेशन लेआउट से जोड़ देते WindowManager। एक जोड़ने के रूप में के रूप में सरल हो सकता ImageViewहै WindowManager, पर छू के लिए सुनो ImageView, या ImageViewअपने से दूर करने के लिए एक समय समाप्त हो गया है Window

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.